/*
 * Weather Widget Styles
 */
.oi-weather-overlay {position: fixed;left: 0;top: 0;right: 0;bottom: 0;z-index: 100000;background: rgba(0,0,0,0.8);opacity: 0;pointer-events: none;-webkit-transition: top 0s ease .35s, opacity .35s ease;-moz-transition: top 0s ease .35s, opacity .35s ease;-ms-transition: top 0s ease .35s, opacity .35s ease;transition: top 0s ease .35s, opacity .35s ease;}
.oi-weather-container {background: #1A2127;padding: 20px 16px;border-radius: 12px;margin: 0 0px 36px 0px;}
.oi-weather-header {display: flex;justify-content: space-between;background: url(../images/weather/weather-bottom-border.svg) no-repeat bottom left;position: relative;padding: 0 0 12px 0;margin: 0 0 12px 0;}
.oi-weather-state {}
.oi-weather-state-selected {font-size: 20px;font-weight: bold;line-height: 23px;color: #fff;position: relative;padding: 0 15px 0 0;display: inline-block;cursor: pointer;}
.oi-weather-state-selected:after {content: '';border: solid #feffff;border-width: 0 2px 2px 0;display: inline-block;padding: 3px;transform: rotate(45deg);-webkit-transform: rotate(45deg);position: absolute;right: 0;top: 6px;}
.oi-weather-label {color: #C2C2C2;font-size: 12px;line-height: 14px;font-weight: normal;text-align: right;}
.oi-weather-arrowicon {width: 26px;height: 16px;background: url(../images/weather/weather-arrow.svg) no-repeat 0 0;display: inline-block;vertical-align: middle;margin-left: 5px;}
.oi-weather-contentwrap {display: flex;justify-content: space-between;}
.oi-weather-content {}
.oi-weather-degree {font-size: 31px;color: #fff;line-height: 36px;font-weight: bold;}
.oi-weather-degree sup {font-size: 15px;color: #fff;line-height: 17px;font-weight: normal;}
.oi-weather-title {font-size: 15px;color: #fff;line-height: 17px;font-weight: normal;margin: 5px 0 0 0;}
.oi-weather-iconwrap {}
.oi-weather-widget-title {font-size: 15px;color: var(--font-color-heading);line-height: 17px;font-weight: bold;margin: 5px 0 12px 0;}


/*
 * City Popup Widget Styles
 */

.oi-cityselctbox-popup {background: var(--bg-color-primary);position: fixed;left: 0;right: 0;bottom: -3000px;z-index: 100000;transition: all 0.8s ease 0s;-moz-transition: all 0.8s ease 0s;-o-transition: all 0.8s ease 0s;-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);height: 500px;width: 700px;margin: auto;z-index: 10000000;box-shadow: 0px 4px 20px 0px #0000001A;border-radius: 12px;}
.oi-cityselctbox-content {padding: 24px 16px 24px 0;overflow-y: auto;position: absolute;height: 360px;top: 60px;left: 16px;right: 0px;}
.oi-cityselect-topblock {background: var(--bg-color-primary);padding: 20px 20px;display: flex;justify-content: space-between;border-bottom: 1px solid var(--border-color-primary);border-radius: 12px 12px 0 0;}
.oi-selectlocation-title {font-size: 15px;color: var(--font-color-primary);font-weight: bold;display: inline-block;}
.oi-selectcity-popup-close {font-size: 12px;color: var(--font-color);text-align: right;display: inline-block;background: var(--header-close) no-repeat 0 0;width: 14px;height: 14px;cursor: pointer;vertical-align: middle;}
.oi-city-searchbox {border-radius: 20px;background: var(--bg-color-primary);border: 1px solid var(--border-color-primary);padding: 10px 20px 10px 40px;position: relative;}
.oi-city-searchtextbox {font-size: 16px;color: #9e9e9e;background: transparent;border: 0 none;appearance: none;outline: none;width: 100%;box-sizing: border-box;}
.oi-city-searchicon {position: absolute;left: 15px;width: 14px;height: 14px;top: 11px;background: var(--header-search) no-repeat 0 0;background-size: contain;cursor: pointer;z-index: 1000;}
.oi-current-location-wrapper {background: var(--bottom-border) no-repeat left top;margin: 24px 0 24px 0;}
.oi-current-location-title {font-size: 14px;line-height: 21px;font-weight: normal;color: #008EFF;padding: 24px 0;background: var(--bottom-border) no-repeat left bottom;}
.oi-current-location-title a {color: #008EFF;}
.oi-widget-title {font-weight: bold;color: var(--font-color-primary);font-size: 16px;line-height: 21px;padding: 24px 0;background: var(--bottom-border) no-repeat left bottom;margin-bottom: 24px;}
.oi-popular-cities-lists {}
.oi-popular-cities-lists ul li {display: inline-block;margin: 0 8px 8px 0;}
.oi-popular-cities-lists ul li a {display: block;padding: 8px 12px;border-radius: 8px;border: 1px solid var(--border-color-primary);font-size: 14px;line-height: 18px;font-weight: bold;color: var(--font-color-primary);}
.oi-other-cities-wrapper {}
.oi-citylist ul {-webkit-column-count: 3;-moz-column-count: 3;column-count: 3;}
.oi-citylist ul li {list-style-type: none;position: relative;margin: 8px 0;font-size: 16px;color: var(--font-color);line-height: 24px;cursor: pointer;}
.oi-citylist ul li a {font-size: 16px;color: var(--font-color-primary);line-height: 24px;padding: 12px 0px;display: block;font-weight: normal;}
.show-dropdown .oi-cityselctbox-popup {bottom: 0;top: 0;}
.show-dropdown .oi-weather-overlay {opacity: 1;} 
.show-dropdown.oi-selbox::after {transform: rotate(180deg);-webkit-transform: rotate(180deg);content: '';}
.oi-popular-cities-wrapper {margin-bottom: 24px;}

.oi-cityselctbox-content {direction: ltr;scrollbar-color: #0A25291A #ccc;scrollbar-width: thin;margin: 0px 0px;}
.oi-cityselctbox-content::-webkit-scrollbar {width: 20px;}
.oi-cityselctbox-content::-webkit-scrollbar-track {background-color: #ccc;border-radius: 10px;}



/*
 * Polls Widget Styles
 */
.oi-polls-wrapper {background: #1A2127;border: 1px solid #000;border-radius: 12px;padding: 24px 20px 38px 20px;margin: 0 0px 36px 0px;}
.oi-poll-heading {font-size: 24px;line-height: 31px;font-weight: bold;padding: 0 0 24px 0;background: url(../images/bottom-border.svg) no-repeat bottom left;margin: 0 0 24px 0;color: #fff;text-align: center;font-family: Times, Arial, Helvetica, sans-serif;}
.oi-polls-container {}
.oi-polls-title {font-size: 15px;line-height: 20px;color: #fff;padding: 0 0 24px 0;font-weight: bold;}
.oi-polls-content {}
.oi-polls-content ul li {background: #28313A;padding: 16px;cursor: pointer;font-size: 15px;line-height: 18px;font-weight: normal;color: #fff;margin-bottom: 18px;display: block;border-radius: 12px;position: relative;}
.oi-polls-content ul li:after {content: '';clear: both;display: table;}
.oi-polls-votes {font-size: 13px;font-weight: normal;line-height: 15px;color: #fff;}
.pollcompleted, .answer {display: none;}
.answer_cntr {width: 100%;display: flex;justify-content: space-between;align-items: center;position: relative;z-index: 10;}
.answer_perc_txt {line-height: 24px;font-size: 20px;color: #fff;font-weight: normal;width: 60px;text-align: right;display: inline-block;}
.answer_perc_line span {font-size: 15px;color: #fff;font-weight: normal;display: inline-block;}
.answer_perc_bg {background: #141a20;position: absolute;left: 0;top: 0;bottom: 0;z-index: 1;border-radius: 12px 0 0 12px;}
.answer_perc {width: calc(100% - 65px);display: inline-block;}

.oi-polls-container.poll-answered .pollcompleted, .oi-polls-container.poll-answered .answer {display: block;}
.oi-polls-container.poll-answered .pollongoing, .oi-polls-container.poll-answered .question {display: none;}



/*
 * Latest Added Poll Styles
 */
.oi-polls-container {position: relative;display: none;}
.next-poll {font-size: 13px;color: #c2c2c2;position: relative;text-align: left;display: none;margin: 12px 0 0 0;}
.next-poll-timerwrap {width: 32px;height: 32px;display: inline-block;vertical-align: middle;margin-left: 10px;border-radius: 50%;border: 2px solid #08f4fb;background: #28313a;padding: 0px;position: relative;}
.next-poll-timer {width: 30px;height: 30px;display: inline-block;vertical-align: middle;border-radius: 50%;text-align: center;line-height: 30px;transform: rotate3d(0, 0, 1, 0.001deg);position: relative;overflow: hidden;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;background: #28313a;}
.next-poll-timer span {display: block;width: 26px;height: 26px;border-radius: 50%;margin: 2px;font-size: 13px;color: #fff;position: relative;z-index: 4;line-height: 26px;}
.oi-polls-container.show-nextpoll {display: block!important;}
.oi-polls-container.poll-answered .next-poll {display: block;}

.next-poll-timer:before,
.next-poll-timer:after {content: " ";position: absolute;left: 0;top: 0;width: 30px;height: 30px;clip: rect(0px, 16px, 32px, 0px);background-color: #28313a;transform: rotate3d(0, 0, 1, 0deg);animation: 2s spin2 linear 3s forwards;z-index: 2;}
.next-poll-timer:after {content: " ";background: #08f4fb;z-index: 0;animation: 2s spin linear 1s forwards;}

@keyframes spin {
  from {transform: rotate3d(0, 0, 1, 0deg);}
  to {transform: rotate3d(0, 0, 1, 180deg);}
}
@keyframes spin2 {
  from {background: #08f4fb;transform: rotate3d(0, 0, 1, 180deg);}
  to {background: #08f4fb;transform: rotate3d(0, 0, 1, 360deg);}
}

/* Fading animation */
.fade {animation-name: fade;animation-duration: 1.5s;}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}





/*
 * Quiz Time Styles
 */
.oi-quiz-wrapper {background: #1A2127;border: 1px solid #000;border-radius: 12px;padding: 24px 20px 38px 20px;margin: 0 0px 36px 0px;}
.oi-quiz-heading {font-size: 24px;line-height: 31px;font-weight: bold;padding: 0 0 24px 0;background: url(../images/bottom-border.svg) no-repeat bottom left;margin: 0 0 24px 0;color: #fff;text-align: center;font-family: Times, Arial, Helvetica, sans-serif;}
.oi-quiz-container {}
.oi-quiz-title {font-size: 16px;line-height: 21px;color: #fff;padding: 0 0 12px 0;font-weight: normal;text-align: center;}
.oi-quiz-options {background: #28313A;border-radius: 12px;}
.oi-quiz-options ul li {padding: 12px 16px;cursor: pointer;font-size: 20px;line-height: 23px;font-weight: normal;color: #fff;display: block;position: relative;border-bottom: 1px solid rgba(255,255,255,0.2);}
.oi-quiz-options ul li:first-child {border-radius: 12px 12px 0 0;}
.oi-quiz-options ul li:last-child {border-bottom: 0 none;border-radius: 0 0 12px 12px;}


.oi-quiz-container {display: none;}
.oi-quiz-container.show {display: block;}
.oi-quiz-options ul li.wrong.active {background: rgba(255,0,0,0.2);}
.oi-quiz-options ul li.correct.active {background: rgba(0,255,0,0.2);}
.oi-quiz-options ul li i {position: absolute;right: 10px;top: 15px;width: 16px;height: 16px;display: inline-block;}
.oi-quiz-options ul li.wrong.active i {background: url(../images/icons/quiz-cross.svg) no-repeat 0 0;}
.oi-quiz-options ul li.correct.active i {background: url(../images/icons/quiz-tick.svg) no-repeat 0 0;}

.oi-quiz-scores-label {font-size: 20px;color: #fff;line-height: 26px;font-weight: bold;text-align: center;}
.oi-quiz-scores {font-size: 72px;color: #fff;line-height: 83px;font-weight: bold;text-align: center;margin: 24px 0;}
.oi-quiz-thankyou-desc {font-size: 13px;color: #C2C2C2;line-height: 18px;font-weight: normal;text-align: center;margin-bottom: 12px;}
.oi-quiz-subscribtion {text-align: center;margin: 0 20px;}
.oi-quiz-subscribtion a {font-size: 14px;line-height: 49px;text-align: center;display: block;font-weight: bold;height: 49px;position: relative;color: #fff;}
.oi-quiz-subscribtion a:before {background: url(../images/btn-left.png) no-repeat 0 0;content: '';position: absolute;left: 0;right: 25px;top: 0;bottom: 0;z-index: 2;}
.oi-quiz-subscribtion a:after {background: url(../images/btn-right.png) no-repeat 0 0;content: '';position: absolute;right: 0;top: 0;width: 25px;bottom: 0;z-index: 2;}
.oi-quiz-subscribtion span {position: relative;z-index: 10;}


 .oi-multi-news-section{margin-bottom: 42px;}



 /*
 * Editors Pick Carousel Styles
 */
 .oi-trending-wrapper {background: #1A2127;border: 1px solid #000;border-radius: 12px;padding: 24px 16px 38px 16px;margin: 0 0px 24px 0px;}
/* .oi-article-slide-wrapper {overflow: hidden;position: relative;border-bottom: 1px solid var(--border-color-primary);padding-bottom: 24px;} */
.oi-article-slide-container .oi-article-wrapper {margin: 0;border-bottom: 0 none;}
.oi-article-slide-wrapper {margin: 0 20px 24px 20px;}
.oi-article-slide-container {width: 100%;position: relative;margin: auto;}

.oi-article-slide-container {overflow: hidden;}
.oi-article-slide-container::-webkit-scrollbar {display: none;}
.oi-article-title {white-space: normal;}
.oi-article-slide-container {display: flex;transition: transform 1s ease;}
.mySlides {width: 100%;flex-shrink: 0;transition: all 1s linear 0s;}
.dots {text-align: center;margin-top: -20px;position: relative;z-index: 100;left: 0;top: 18px;}
.dot {display: inline-block;width: 6px;height: 6px;background: #8F99A3;border-radius: 50%;margin: 0 5px;cursor: pointer;}
.dot.active {background: #19C0C5;width: 7px;height: 7px;}
.slide img{width: 100%;height: auto;}
.oi-article-image {
    border-radius: 14px;
    overflow: hidden;position: relative;width: 100%;position: relative;
}
.oi-article-image .hover-text {position: absolute;color: #141A20;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 0;border: 1px solid #08F4FB;background: #08F4FB;padding: 5px;transition: all 0.3s ease;text-align: center;font-size: 13px;z-index: 2;border-radius: 8px;}
.oi-article-image .hover-text:before {content: '';left: -4px;top: -4px;right: -4px;bottom: -4px;border: 1px solid #08F4FB;position: absolute;z-index: -1;border-radius: 8px;}
.oi-article-wrapper:hover .hover-text{opacity: 1;}
.oi-article-wrapper:hover .oi-article-image img{transform: scale(1.2)}
.oi-article-image img{width: 100%;display: block;max-width: 100%;transition: all 0.3s ease;height: 100%;}
.oi-trending-article-title{font-size: 14px;font-weight: 700;line-height: 18px;padding: 8px 0px;}
.oi-trending-article-title a{color: #fff;}
.oi-trending-article-cat a{color: #c2c2c2;font-size: 14px;font-weight: 700;}
/* Fading animation */
.fade {animation-name: fade;animation-duration: 1s;}
@keyframes fade {from {width: 100%} to {width: 100%;}}
.next-arrow {background: #28313A;width: 32px;height: 32px;border-radius: 8px;box-shadow: 0px 1.6px 4.8px 0px #00000029;position: absolute;right: 5px;top: 60px;cursor: pointer;}
.next-arrow i {background: url(../images/darkmode/next-arrow-white.svg) no-repeat 0 0;position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 16px;height: 16px;}




.oi-more-news {margin: 24px 16px;}
.oi-more-news a {background: var(--bg-more-nav);border-radius: 10px;padding: 10px 16px 10px 16px;display: block;text-align: center;font-size: 14px;color: var(--font-color-more-nav);line-height: 19px;font-weight: bold;}
.oi-more-arrow {display: inline-block;vertical-align: middle;border: solid var(--font-color-more-nav);border-width: 0 2px 2px 0;padding: 3px;transform: rotate(-45deg);-webkit-transform: rotate(-45deg);}


.oi-category .oi-article-title {padding: 12px 0 0 0;}





/*
 * Wallpapers Widget Styles
 */

.oi-wallpapers-container {margin-left: 260px;}
.oi-wallpapers-container ul {list-style-type: none;overflow-x: auto;white-space: nowrap;scrollbar-width: none;-ms-overflow-style: none; }
.oi-wallpapers-container ul::-webkit-scrollbar { display: none;}
.oi-wallpapers-container ul li {display: inline-block;margin-right: 16px;width: 300px;white-space: normal;vertical-align: top;overflow: hidden;}
.oi-wallpapers-container ul li a {display: block;border-radius: 12px;}
.oi-wallpapers-thumbimg {border-radius: 12px;}
.oi-wallpapers-thumbimg img {border-radius: 12px;}
.oi-wallpapers-title {color: var(--font-color-primary);overflow: hidden;padding: 6px 12px 0 12px;font-size: 13px;line-height: 18px;font-weight: bold;}
.oi-wallpapers-titleinner {height: 42px;overflow: hidden;-webkit-line-clamp: 3;-webkit-box-orient: vertical;text-overflow: ellipsis;display: -webkit-box;}