/**
 * Customizer controls styling
 *
 */
 #accordion-section-newsmatic_about_section h3.accordion-section-title {
  background-color: #2271b1!important;
  color: #ffffff!important;
}

#customize-controls .customize-info {
  margin-bottom: 0 !important;
}

#customize-controls .control-section>h3.accordion-section-title {
  display: flex;
  align-items: center;
  padding: 14px 26px;
  font-size: 13px;
  font-weight: 400;
  line-height: 13px;
  border-left: none;
  border-bottom: none;
  background-color: rgba(0,0,0,0);
}

#customize-controls .control-section>h3.accordion-section-title:after {
  font-size: 12px;
  top: calc(50% - 6px);
  right: 23px;
  color: inherit;
}

.customize-control select,
.customize-control input {
  margin-top: 2px;
  border: none;
  box-shadow: 0px 0px 2px rgb(24 35 177 / 58%);
  border-radius: 0;
}

#accordion-section-newsmatic_about_section h3.accordion-section-title {
  background-color: #2271b1;
  color: #ffffff;
}

/**********************************
  Section Tab Styles
**********************************/
.customize-section-tab-control .components-tab-panel__tabs {
  display: -webkit-box;
  display: flex;
  margin-top: -5px;
  margin-left: -24px;
  margin-right: -24px;
  padding: 0;
  margin-bottom: 0;
  border: 1px solid #dddddd;
  background: #ffffff;
  margin-bottom: 0;
}

.customize-section-tab-control .components-tab-panel__tabs button {
  -webkit-box-flex: 1;
  flex: 1 1 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 1px;
  font-style: normal;
  text-transform: uppercase;
  height: 40px;
  margin: 0;
  box-sizing: content-box;
  padding: 0 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  border-top: 2px solid transparent;
  border-radius: 0;
}

.customize-section-tab-control .components-tab-panel__tabs button.active-tab {
  border-top-color: #0071a1;
  color: #0073aa;
  background-image: linear-gradient( 180deg, #f3f5f6, #ffffff);
}

/**********************************
  Item Sortable Control Styles
**********************************/
.customize-item-sortable-control .sort-list .sort-item {
  padding: 0 0 0 12px;
  border: 1px solid #ddd;
  color: #556068;
  background: #fff;
  cursor: move;
  font-size: 12px;
  line-height: 38px;
  margin: 0 0 10px;
  border-radius: 3px;
}

.customize-item-sortable-control .sort-list .sort-item.invisible {
  opacity: .6;
}

.customize-item-sortable-control .sort-list .sort-item .trigger-icon {
  cursor: pointer;
  float: right;
  position: relative;
  font-size: 16px;
  padding: 9px;
  line-height: 20px;
  border-left: 1px solid #ddd;
}

/***************************
  Info Box control
****************************/
.customize-info-box-control .info-box-label {
  margin: 0;
  font-size: 13px;
}
.customize-info-box-control .info-box-icon {
  margin-right: 6px;
}

.customize-info-box-control .info-box-description {
  font-size: 12px;
  font-style: italic;
}

.customize-info-box-control .info-box-button {
  display: block;
  text-align: center;
}

/***************************
  Responsive Box control
****************************/
.customize-responsive-range-control,
.customize-responsive-box-control {
  position: relative;
}

.customize-responsive-range-control .responsive-icons,
.customize-responsive-box-control .responsive-icons {
  position: absolute;
  right: 30px;
  cursor: pointer;
  z-index: 9;
}

.block-content .responsive-control:hover,
h2.block-heading:hover {
  cursor: initial;
}

.block-content .responsive-control {
  position: relative;
  margin-top: 20px;
}

.block-content .responsive-icons {
  position: absolute;
  right: 0;
  top: 0;
}

.block-content .responsive-icons:hover {
  cursor: pointer;
}

.block-content .components-base-control__label.components-text {
  text-transform: capitalize;
  font-size: 13px;
}


.block-content .components-base-control__label,
.customize-responsive-range-control .components-base-control__label,
.block-content .components-base-control .components-text.components-input-control__label
 {
  font-size: 13px;
  text-transform: capitalize;
}


/**********************************
  Color Picker / Color Group Picker Styles
**********************************/
.customize-color-image-group-control .preset-colors,
.customize-color-group-control .preset-colors,
.customize-color-group-picker-control .preset-colors,
.customize-color-picker-control .preset-colors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 5px 5px 5px;
  border-bottom: 1px solid #eee;
  width: 210px;
  margin: 0 auto;

}

.react-colorful {
  margin: 0 auto;
}

.customize-color-image-group-control .preset-colors .preset-colors-inner,
.customize-color-group-control .preset-colors .preset-colors-inner,
.customize-color-group-picker-control .preset-colors .preset-colors-inner,
.customize-color-picker-control .preset-colors .preset-colors-inner {
  display: flex;
  margin: 0;
  flex-wrap: wrap;
}

.customize-color-image-group-control .preset-colors .preset-colors-inner li,
.customize-color-group-control .preset-colors .preset-colors-inner li,
.customize-color-group-picker-control .preset-colors .preset-colors-inner li,
.customize-color-picker-control .preset-colors .preset-colors-inner li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  margin-bottom: 5px;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: inset 0 0 3px rgb(0 0 0 / 9%);
}

.customize-color-image-group-control .preset-colors .preset-colors-inner li:not(:last-child),
.customize-color-group-control .preset-colors .preset-colors-inner li:not(:last-child),
.customize-color-group-picker-control .preset-colors .preset-colors-inner li:not(:last-child),
.customize-color-picker-control .preset-colors .preset-colors-inner li:not(:last-child) {
  margin-right: 10px;
}

.customize-color-image-group-control .preset-colors .preset-colors-inner li.active,
.customize-color-group-control .preset-colors .preset-colors-inner li.active,
.customize-color-group-picker-control .preset-colors .preset-colors-inner li.active,
.customize-color-picker-control .preset-colors .preset-colors-inner li.active {
  box-shadow: inset 0 0 3px rgb(0 0 0 / 9%), 0px 0px 0px 3px #fff;
}

.customize-color-image-group-control .preset-colors .preset-colors-inner li.active:before,
.customize-color-group-control .preset-colors .preset-colors-inner li.active:before,
.customize-color-group-picker-control .preset-colors .preset-colors-inner li.active:before,
.customize-color-picker-control .preset-colors .preset-colors-inner li.active:before {
  position: absolute;
  content: "";
  z-index: -1;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background: rgba(0,0,0,.07);
  border-radius: 100%;
}

.customize-color-image-group-control .preset-colors .preset-colors-inner li.active:after,
.customize-color-group-control .preset-colors .preset-colors-inner li.active:after,
.customize-color-group-picker-control .preset-colors .preset-colors-inner li.active:after,
.customize-color-picker-control .preset-colors .preset-colors-inner li.active:after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px;
  left: -1px;
  right: 0px;
  bottom: 0px;
  content: "";
  font-family: dashicons;
  font-size: 15px;
  color: rgb(255, 255, 255);
  text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
}

.customize-preset-gradient-picker-control .components-popover__content,
.customize-preset-color-picker-control .components-popover__content,
.customize-color-image-group-control .components-popover__content,
.customize-color-group-control .components-popover__content,
.customize-color-group-picker-control .components-popover__content,
.customize-color-picker-control .components-popover__content {
  border-radius: 3px;
  border: none;
}

.customize-preset-gradient-picker-control .components-circular-option-picker,
.customize-preset-color-picker-control .components-circular-option-picker,
.customize-color-group-control .components-circular-option-picker,
.customize-color-image-group-control .components-circular-option-picker {
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

.customize-preset-gradient-picker-control .components-color-picker,
.customize-preset-color-picker-control .components-color-picker,
.customize-color-image-group-control .components-color-picker,
.customize-color-group-control .components-color-picker,
.customize-color-group-picker-control .components-color-picker,
.customize-color-picker-control .components-color-picker {
  padding: 10px 8px;
  box-sizing: border-box;
  width: 100%;
}

.customize-preset-color-picker-control .react-colorful,
.customize-color-image-group-control .react-colorful,
.customize-color-group-control .react-colorful,
.customize-color-group-picker-control .react-colorful,
.customize-color-picker-control .react-colorful {
  width: 100%;
}

.customize-preset-color-picker-control .react-colorful .react-colorful__saturation,
.customize-color-image-group-control .react-colorful .react-colorful__saturation,
.customize-color-group-control .react-colorful .react-colorful__saturation,
.customize-color-group-picker-control .react-colorful .react-colorful__saturation,
.customize-color-picker-control .react-colorful .react-colorful__saturation {
  height: 117px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.customize-gradient-picker-control .customize-control-title,
.customize-color-picker-control .customize-control-title,
.customize-color-group-control .customize-control-title,
.customize-color-image-group-control .customize-control-title,
.customize-color-group-picker-control .customize-control-title {
  font-size: 11.5px;
}

.customize-preset-color-picker-control .control-header .control-header-trigger,
.customize-preset-gradient-picker-control .control-header .control-header-trigger,
.customize-gradient-picker-control .control-header .control-header-trigger,
.customize-color-picker-control .control-header .control-header-trigger,
.customize-color-group-control .control-header .control-header-trigger,
.customize-color-image-group-control .control-header .control-header-trigger,
.customize-advanced-color-group-control .control-header .control-header-trigger,
.customize-color-group-picker-control .control-header .control-header-trigger,
.customize-control-color-picker .control-header .control-header-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customize-gradient-picker-control .control-header .component-color-indicator,
.customize-color-picker-control .control-header .component-color-indicator,
.customize-color-group-control .control-header .component-color-indicator,
.customize-color-image-group-control .control-header .component-color-indicator,
.customize-advanced-color-group-control .control-header .component-color-indicator,
.customize-color-group-picker-control .control-header .component-color-indicator,
.customize-control-color-picker .control-header .component-color-indicator {
  cursor: pointer;
  transform: scale(1);
  height: 28px;
  width: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.customize-gradient-picker-control .control-header .component-color-indicator:hover,
.customize-color-picker-control .control-header .component-color-indicator:hover,
.customize-color-group-control .control-header .component-color-indicator:hover,
.customize-color-image-group-control .control-header .component-color-indicator:hover,
.customize-advanced-color-group-control .control-header .component-color-indicator:hover,
.customize-color-group-picker-control .control-header .component-color-indicator:hover,
.customize-control-color-picker .control-header .component-color-indicator:hover {
  transform: scale(1.05);
  box-shadow: none;
}

.customize-gradient-picker-control,
.customize-color-picker-control,
.customize-control-advanced-color-group,
.customize-control-color-group-picker, 
.customize-control-color-picker {
  margin-bottom: 22px;
}

.customize-gradient-picker-control .customize-control-title,
.customize-color-picker-control .customize-control-title,
.customize-color-group-control .customize-control-title,
.customize-color-image-group-control .customize-control-title,
.customize-control-advanced-color-group .customize-control-title,
.customize-control-color-group-picker .customize-control-title, 
.customize-control-color-picker .customize-control-title {
  line-height: 2;
  font-size: 13px;
}

.customize-color-group-picker-control .control-content-wrap,
.customize-color-group-control .control-content-wrap,
.customize-color-image-group-control .control-content-wrap {
  display: flex;
  align-items: center;
}

.customize-color-picker-control .control-content-wrap .reset-button,
.customize-color-group-picker-control .control-content-wrap .reset-button,
.customize-color-group-control .control-content-wrap .reset-button,
.customize-color-image-group-control .control-content-wrap .reset-button {
  color: #006ba1;
  height: 20px;
  width: 20px;
  padding: 4px;
  background: 0 0;
  box-shadow: none;
}

.customize-color-picker-control .control-content-wrap .reset-button .dashicon,
.customize-color-group-picker-control .control-content-wrap .reset-button .dashicon,
.customize-color-group-control .control-content-wrap .reset-button .dashicon,
.customize-color-image-group-control .control-content-wrap .reset-button .dashicon {
  width: 12px;
  height: 12px;
  font-size: 12px;
}


.customize-color-picker-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover,
.customize-color-group-picker-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover,
.customize-color-group-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover,
.customize-color-image-group-control .control-content-wrap .reset-button.components-button.is-secondary:hover:not(:disabled):hover {
  color: #02abff;
  box-shadow: none;
}

.customize-preset-gradient-picker-control .components-popover__content .components-surface.components-card{
  padding: 1px 4px;
}

/**********************************
      Border Box control 
***********************************/
.customize-border-control .control-inner {
  display: flex;
  justify-content: flex-end;
}

.customize-border-control .control-inner > div {
  padding: 2px;
}

.customize-border-control .component-color-indicator {
  width: 26px;
  height: 26px;
  width: 26px;
}

.customize-border-control .preset-colors {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px;
  border-bottom: 1px solid #eee;
}

.customize-border-control .preset-colors .preset-colors-inner {
  display: flex;
  margin: 0;
}

.customize-border-control .preset-colors .preset-colors-inner li {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  margin-bottom: 0;
  cursor: pointer;
  border-radius: 100%;
  box-shadow: inset 0 0 3px rgb(0 0 0 / 9%);
}

.customize-border-control .preset-colors .preset-colors-inner li:not(:last-child) {
  margin-right: 10px;
}

.customize-border-control .preset-colors .preset-colors-inner li.active {
  box-shadow: inset 0 0 3px rgb(0 0 0 / 9%), 0px 0px 0px 3px #fff;
}

.customize-border-control .preset-colors .preset-colors-inner li.active:before {
  position: absolute;
  content: "";
  z-index: -1;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  background: rgba(0,0,0,.07);
  border-radius: 100%;
}

.customize-border-control .preset-colors .preset-colors-inner li.active:after {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 1px;
  left: -1px;
  right: 0px;
  bottom: 0px;
  content: "";
  font-family: dashicons;
  font-size: 15px;
  color: rgb(255, 255, 255);
  text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
}

.customize-border-control .components-popover__content {
  border-radius: 12px;
  border: none;
}

.customize-border-control .components-color-picker {
  padding: 20px 17px;
  width: 100%;
  box-sizing: border-box;
}

.customize-border-control .react-colorful {
  width: 100%;
}

.customize-border-control .react-colorful .react-colorful__saturation {
  height: 117px;
  border-radius: 5px;
  margin-bottom: 20px;
}
/**********************************
  Tab Panel Styles
**********************************/
.newsmatic-group-tab-panel {
  width: 190px;
}

.newsmatic-group-tab-panel .components-tab-panel__tabs {
  display: flex;
  justify-content: space-around;
  background: #ffffff;
}

.newsmatic-group-tab-panel .components-tab-panel__tabs .components-tab-panel__tabs-item {
  flex: 1 1 auto;
  border: 1px solid #dfe1e4;
  display: flex;
  justify-content: center;
  font-size: 12px;
  font-weight: 400;
  height: 38px;
}

.newsmatic-group-tab-panel .components-tab-panel__tabs .components-tab-panel__tabs-item:first-child {
  border-radius: 3px 0 0 3px;
  border-right: none;
}

.newsmatic-group-tab-panel .components-tab-panel__tabs .components-tab-panel__tabs-item:last-child {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

.newsmatic-group-tab-panel .components-tab-panel__tabs .active-tab {
  color: #fff;
  background: #2271b1;
  border-color: #2271b1;
}

.component-color-indicator {
  cursor: pointer;
}

#accordion-panel-newsmatic_innerpages_settings_panel,
#accordion-section-background_image,
#accordion-section-footer_three_column_section{
  margin-top: 15px;
}

.customize-color-group-picker-control .components-dropdown {
  padding: 0 5px;
}

.newsmatic-group-tab-panel .editor-post-featured-image {
  padding: 7px;
}

.newsmatic-group-tab-panel .more-settings {
  height: 150px;
  overflow-y: scroll;
  padding: 15px 5px;
}

.newsmatic-group-tab-panel .more-settings .components-button-group .components-button {
  font-size: 12px;
}

.editor-post-featured-image__preview .components-responsive-wrapper {
  height: 75px;
}


/**********************************
  Block Controls
**********************************/
.customize-video-playlist-control .block-item, .customize-block-repeater-control .block-item, .newsmatic-repeater-control-inner {
  position: relative;
}

.customize-video-playlist-control .block-item.block--hidden,
.customize-block-repeater-control .block-item.block--hidden {
  opacity: 0.6;
}

.customize-video-playlist-control .block-item .block-header,
.customize-block-repeater-control .block-item .block-header {
  display: flex;
  padding: 0 0 0 12px;
  border: 1px solid #ddd;
  color: #556068;
  background: #fff;
  cursor: move;
  font-size: 12px;
  margin: 0 0 10px;
  border-radius: 3px;
  align-items: center;
  position: relative;
}

.customize-video-playlist-control .block-item .block-header {
  margin-bottom: 0px;
}

.customize-video-playlist-control .block-item {
  margin-bottom: 10px;
}

.customize-video-playlist-control .block-item .block-content {
  border: 1px solid #ddd;
  border-top: none;
  background: #fff;
  padding: 2px 6px;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item {
  display: flex;
  padding: 0 0 0 12px;
  border: 1px solid #ddd;
  color: #556068;
  background: #fff;
  cursor: move;
  font-size: 12px;
  line-height: 38px;
  margin: 0 0 10px;
  border-radius: 3px;
}

#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item {
  display: flex;
  padding: 0 0 0 12px;
  border: 1px solid #ddd;
  color: #556068;
  background: #fff;
  cursor: move;
  font-size: 12px;
  line-height: 38px;
  margin: 0 0 10px;
  border-radius: 3px;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item {
  display: flex;
  padding: 0 0 0 12px;
  border: 1px solid #ddd;
  color: #556068;
  background: #fff;
  cursor: move;
  font-size: 12px;
  line-height: 38px;
  margin: 0 0 10px;
  border-radius: 3px;
}


.block-item .block-header .control-title,
#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading {
  flex: 1;
  display: block;
  text-transform: capitalize;
  font-size: 12px;
}

.block-item .block-header .display-icon,
.block-item .block-header .setting-icon,
#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .display-icon,
#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .settings-icon,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .display-icon,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .settings-icon   {
  cursor: pointer;
  float: right;
  position: relative;
  font-size: 16px;
  padding: 9px;
  line-height: 20px;
  border-left: 1px solid #ddd;
}

#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap {
  padding: 0px;
}

#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading {
  width: 150px;
}

.block-item .block-header .remove-icon {
  display: none;
  position: absolute;
  right: -10px;
  border: 1px dashed red;
  border-radius: 70%;
  width: 20px;
  height: 20px;
  top: -10px;
  color: red;
  text-decoration: none;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .remove-item,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .remove-item {
  text-decoration: none;
  order: 1;
  margin-top: -10px;
  margin-right: -12px;
  position: relative;
  display: none;
  width: 0;
  height: 0;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .remove-item .dashicons.dashicons-minus,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .remove-item .dashicons.dashicons-minus{
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px dashed red;
  border-radius: 50px;
  left: -10px;
  z-index: 999;
}

.block-item .block-header:hover .remove-icon,
#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item:hover .remove-item,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item:hover .remove-item{
  display: block;
  text-decoration: none;
} 

.block-item .block-header .remove-icon:hover,
#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .remove-item:hover,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .remove-item:hover{
  cursor: pointer;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap {
  width: 100%;
}

.customize-video-playlist-control .block-item .components-popover__content,
.customize-block-repeater-control .block-item .components-popover__content {
  width: 280px;
  border-radius: 5px;
  box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  -webkit-box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  -moz-box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  border: none;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item.popupActive,
#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item.popupActive {
border-top: 6px solid #007CBA;
}

.customize-control-item-sortable .sort-list .sort-item {
  display: block;
}

/* Scrollbar styling */
.components-popover__content::-webkit-scrollbar{
width: 5px;
}

/* Track */
.components-popover__content::-webkit-scrollbar-track{
box-shadow: inset 0 0 5px #000000; 
border-radius: 10px;
}

/* Handle */
.components-popover__content::-webkit-scrollbar-thumb{
background: #545454; 
border-radius: 20px;
}

/* Handle on hover */
.components-popover__content::-webkit-scrollbar-thumb:hover{
background: #545454; 
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-control-fields.isShow {
  position: fixed;
  visibility: visible;
  padding: 0;
  overflow: auto;
  background: #fff;
  padding: 20px;
  z-index: 999;
  box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  -webkit-box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  -moz-box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  border-radius: 5px;
  display: block;
  top: auto;
  margin-top: 0;
  border: none;
  left: 330px;
  width: 195px;
  bottom: 20%;
}
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-control-fields.isShow {
position: fixed;
  visibility: visible;
  padding: 0;
  overflow: auto;
  background: #fff;
  padding: 20px;
  z-index: 999;
  max-height: 62%;
  box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  -webkit-box-shadow: 1px 1px 1px 3px rgb(251 251 251);
  -moz-box-shadow: 1px 1px 1px 3px rgb(251 251 251);

  border-radius: 5px;
  display: block;
  top: 44%;
  margin-top: 0;
  border: none;
  overflow: hidden;
  overflow-y: scroll;
  height: 410px;
  left: 310px;
  z-index: 1;
  width: 500px;
  bottom: 0;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap {
  padding: 0;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .fontawesome-icon-picker h2.control--item-label,
#customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .fontawesome-icon-picker h2.control--item-label {
  display: none;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-holder .icon-header i,
#customize-control-opinons_items .newsmatic-repeater-control .fontawesome-icon-picker .icon-holder .icon-header i {
  font-size: 20px;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-search-input,
#customize-control-opinons_items .newsmatic-repeater-control .fontawesome-icon-picker .icon-search-input  {
  position: fixed;
  height: 33px;
  margin-bottom: 65px;
  display: block;
  width: 590px;
  margin-top: -28px;
}




/** post query field **/
.block-content .post-query-field {
  margin-bottom: 6px;
  padding: 6px;
}

.block-content .post-query-field > div {
  float: right;
}

.block-content .post-query-field-label {
  display: inline-block;
  font-weight: 500;
  text-decoration: underline;
  font-size: 13px;
  text-transform: uppercase;
  color: #007cba;
}

.block-content .dashicons-edit {
  background-color: #f0f0f0;
  padding: 3px;
  border-radius: 50%;
  vertical-align: middle;
  border: 2px solid #007cba;
  color: #007cba;
}

.block-content .dashicons-edit:hover {
  cursor: pointer;
}

#customize-control-social_icons .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-control-fields,
#ccustomize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-control-fields.isShow {
  width: 213px;
  left: 22px;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-header > div {
  flex: 50%;
  text-align: center;
  padding: 7px;
  vertical-align: middle;
  line-height: 1;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-holder .icons-list {
  position: fixed;
  background-color: #fff;
  padding: 20px;
  height: 350px;
  overflow: auto;
  border: 1px solid #ffbcbc;
  margin-top: 8px;
  bottom: 0;
  left: 300px;
  width: 600px;
  margin-bottom: 5px;
  padding-top: 35px;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-holder .icons-list i {
  cursor: pointer;
  font-size: 18px;
  padding: 12px 9px;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-holder .icons-list i:hover {
  color: #d95f3d;
}

#customize-control-social_icons .newsmatic-repeater-control .fontawesome-icon-picker .icon-holder .icons-list i.selected {
  color: #d95f3d;
  font-size: 25px;
}

/**********************************
  Typography
**********************************/
.customize-typography-control .inner-field.font-family input {
  box-shadow: none;
}

.customize-typography-control .control-title {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1px;
  cursor: default;
}

.customize-typography-control .reset-button,
.newsmatic-typography-popover .reset-button {
  font-size: 12px;
  box-shadow: none;
}

.newsmatic-typography-popover .typo-field .reset-button {
  position: absolute;
  right: 80px;
}

.customize-typography-control .components-button.is-secondary:hover:not(:disabled):hover,
.newsmatic-typography-popover .components-button.is-secondary:hover:not(:disabled):hover {
  color: #02abff;
  box-shadow: none;
}

.customize-typography-control .reset-button .dashicon,
.newsmatic-typography-popover .reset-button .dashicon {
  font-size: 12px;
}

.customize-typography-control .control-title .reset-button {
  float: right;
}

.customize-typography-control .components-dropdown {
  display: block;
  margin-top: 6px;
}

.customize-typography-control .typo-value-holder {
  position: relative;
}

.customize-typography-control .typo-summ-value:hover {
  border-color: #0e8ecc;
}

.customize-typography-control .typo-summ-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ddd;
  padding-right: 8px;
  transition: border-color .1s linear;
}

.customize-typography-control .summ-vals {
  padding: 6px 0 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.customize-typography-control .summ-vals .summ-val {
  display: inline-flex;
  align-items: center;
}

.customize-typography-control .summ-vals i {
  margin: 0 7px;
  font-style: normal;
  font-size: 70%;
  opacity: .5;
  line-height: normal;
  position: relative;
  margin-top: -5px;
}

.customize-typography-control .append-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .7;
  color: inherit;
}

.newsmatic-typography-popover .components-popover__content {
  width: 16rem;
  border-radius: 5px;
  border: none;
  margin: 0 auto;
}

.newsmatic-typography-popover .components-popover__content .typo-fields .typo-field {
  position: relative;
  padding: 0 5px;
  margin: 5px 0;
  box-sizing: border-box;
  border-bottom: 1px dashed #eee;
}

.newsmatic-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons {
  cursor: pointer;
  position: absolute;
  right: 16px;   
}

.newsmatic-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons .dashicons {
  font-size: 16px;
}

.newsmatic-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons .dashicons.isActive {
  color: #2271b1;
}

.newsmatic-typography-popover .components-popover__content .typo-fields .typo-field.field-group {
  display: flex;
  align-items: center;
  position: relative;
  height: 50px;
  padding: 0 20px;
  margin: 0;
  box-sizing: border-box;
  border-bottom: 1px dashed #eee;
}

.newsmatic-typography-popover .components-popover__content .typo-fields .typo-field.field-group .inner-field {
  flex: 1;
  display: flex;
  justify-content: space-evenly;
}

.newsmatic-typography-popover .inner-field.text-decoration,
.newsmatic-typography-popover .inner-field.text-transform {
  margin: 0 2px;
}

.newsmatic-typography-popover .inner-field.text-decoration span,
.newsmatic-typography-popover .inner-field.text-transform span {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;
  margin: 0;
  padding: 5px 0;
  cursor: pointer;
  border: 1px solid #dfe1e4;
}

.newsmatic-typography-popover .inner-field.text-decoration span.isActive,
.newsmatic-typography-popover .inner-field.text-transform span.isActive {
  color: #fff;
  background: #2271b1;
  border-color: #2271b1;
}
.newsmatic-typography-popover .inner-field.text-decoration span:first-child,
.newsmatic-typography-popover .inner-field.text-transform span:first-child {
  border-radius: 3px 0 0 3px;
  border-right: none;
}

.newsmatic-typography-popover .inner-field.text-decoration span:last-child,
.newsmatic-typography-popover .inner-field.text-transform span:last-child {
  border-radius: 0 3px 3px 0;
  border-left: none;
}

/*******************
  Icon Select Icon
*******************/
.customize-control-icon-text .field-wrap {
  display: flex;
}

.customize-control-icon-text .field-wrap .components-dropdown {
  flex: 0 1 15%;
}

.customize-control-icon-text .field-wrap .components-base-control {
  flex: 0 1 82%;
}

.customize-control-icon-text .field-wrap .components-dropdown {
  text-align: center;
  padding: 0;
  border: 1px solid #8d8d8d;
  margin-right: 5px;
  border-radius: 7px;
  position: relative;
  height: 30px;
  vertical-align: middle;


  box-shadow: 3px 5px 7px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 3px 5px 7px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 3px 5px 7px -3px rgba(0,0,0,0.75);
}

.customize-control-icon-text .field-wrap .components-dropdown i{
  padding: 10px 17px;
  display: inline-block;
}

.customize-control-icon-text .field-wrap .components-dropdown:hover {
  cursor: pointer;
  box-shadow: 6px 7px 8px -3px rgba(0,0,0,0.75);
  -webkit-box-shadow: 6px 7px 8px -3px rgba(0,0,0,0.75);
  -moz-box-shadow: 6px 7px 8px -3px rgba(0,0,0,0.75);

}

.customize-control-icon-text .field-wrap .components-dropdown .components-popover__content {
  width: 230px;
  padding: 5px;
}

.customize-control-icon-text .field-wrap .components-dropdown .components-popover__content i{
  padding: 10px;
  display: inline-block;
}

.customize-control-icon-text .field-wrap .components-dropdown .components-popover__content i:after {
  content: none;
}

.customize-control-icon-text .field-wrap .components-dropdown .components-popover__content i:hover{
  cursor: pointer;
  color: #000;
}

.components-base-control .components-range-control__root {
  display: flex;
  align-items: center;
}

/***************************************
  Responsive Multiselect Tab Styles
*****************************************/
.customize-block-repeater-control .components-button-group,
.customize-radio-tab-control .components-button-group,
.customize-responsive-multiselect-tab-control .components-button-group {
  display: flex;
}

.customize-block-repeater-control .components-button-group > button,
.customize-radio-tab-control .components-button-group > button,
.customize-responsive-multiselect-tab-control .components-button-group > button {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

#customize-control-header_menu_background_color_group .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content{
  left: 80px!important;
  position: absolute!important;
  top: -500px!important;
  width: 250px;
}

.customize-color-image-group-control .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content {
  width: 247px;
  top: auto;
  left: -30px;  
}

.media-field-image__preview {
  display: block;
  width: 100%;
  overflow: hidden;
  height: 79px;
  margin-bottom: 20px;
}

.media-field-image__preview img {
      width: 100%;
  height: 100px;
  object-fit: contain;
}

.media-field .media-field-image__toggle {
  border: 1px solid #545454;
}

.media-field-image__preview .components-responsive-wrapper div{
  display: none;
}

.layout-list {
  width: 180px;    
}

.layout-list li{
  padding: 5px 0;
  position: relative;
  font-weight: 500;
}

.layout-list li:hover{
  cursor: pointer;
  color: #d95f3d;
  font-weight: 500;
}

.layout-list li:hover:after {
  content: 'add';
  position: absolute;
  right: 0;
  background-color: #d95f3d;
  color: #fff;
  padding: 2px 5px;
  border-radius: 10px 0 0 10px;
  line-height: 1;
  font-weight: 500;
}


/** customizer layout **/
li#accordion-section-background_image:before {
  content: 'Core';
  font-weight: 600;
  color: #50575e;
  font-size: 13px;
  line-height: 1.3;
  padding: 10px 20px;
  display: block;
  padding-left: 10px;
}

li#accordion-section-background_image {
  border-top: 1px solid #e6e6e6!important;
  margin-top: 20px;
}

.customize-control-preset-color-picker .customize-preset-color-picker-control .control-header-trigger,
.customize-control-preset-gradient-picker .customize-preset-gradient-picker-control .control-header-trigger{
  display: flex;
  align-items: center;
}

.customize-control-preset-color-picker .customize-preset-color-picker-control .control-header-trigger .customize-control-title,
.customize-control-preset-gradient-picker .customize-preset-gradient-picker-control .control-header-trigger .customize-control-title,
.customize-control-preset-color-picker .customize-preset-color-picker-control .control-header-trigger label,
.customize-control-preset-gradient-picker .customize-preset-gradient-picker-control .control-header-trigger label
{
  flex: 1;
}

.customize-color-picker-control .control-content-wrap {
  display: flex;
  align-items: center;
}

li#accordion-panel-newsmatic_global_panel:before {
  content: 'General Options';
  font-weight: 600;
  color: #50575e;
  font-size: 13px;
  line-height: 1.3;
  padding: 10px 20px;
  display: block;
  padding-left: 10px;
}

li#accordion-panel-newsmatic_global_panel {
  margin-top: 20px;
}

li#accordion-section-newsmatic_main_banner_section:before {
  content: 'Front Page Options';
  font-weight: 600;
  color: #50575e;
  font-size: 13px;
  line-height: 1.3;
  padding: 10px 20px;
  display: block;
  padding-left: 10px;
}

li#accordion-section-newsmatic_main_banner_section {
  border-top: 1px solid #e6e6e6!important;
  margin-top: 20px;
}

li#accordion-panel-newsmatic_blog_post_archive_panel:before {
  content: 'Page Options';
  font-weight: 600;
  color: #50575e;
  font-size: 13px;
  line-height: 1.3;
  padding: 10px 20px;
  display: block;
  padding-left: 10px;
}

li#accordion-panel-newsmatic_blog_post_archive_panel {
  border-top: 1px solid #e6e6e6!important;
  margin-top: 20px;
}

li#accordion-section-newsmatic_footer_section:before {
  content: 'Footer Options';
  font-weight: 600;
  color: #50575e;
  font-size: 13px;
  line-height: 1.3;
  padding: 10px 20px;
  display: block;
  padding-left: 10px;
}

li#accordion-section-newsmatic_footer_section {
  border-top: 1px solid #e6e6e6!important;
  margin-top: 20px;
}

li#accordion-section-newsmatic_top_header_section:before {
  content: 'Header Options';
  font-weight: 600;
  color: #50575e;
  font-size: 13px;
  line-height: 1.3;
  padding: 10px 20px;
  display: block;
  padding-left: 10px;
}

li#accordion-section-newsmatic_top_header_section {
  border-top: 1px solid #e6e6e6!important;
  margin-top: 20px;
}

.customize-preset-color-picker-control .component-color-indicator,
.customize-preset-gradient-picker-control .component-color-indicator{
  width: 30px;
  height: 20px;
  border-radius: 10%;
}

#fs_customizer_support span{
  flex: 1;
}


#customize-control-opinons_section_column .components-button-group,
.block-content .components-button-group
{
  width: 70%;
  padding: 5px 0;
}

#customize-control-opinons_section_column .components-button-group .components-button,
.block-content .components-button-group .components-button {
  box-shadow: none;
  border: 1px solid #b3b3b3;

}

#customize-control-opinons_section_column .components-button-group .components-button:hover,
.block-content .components-button-group .components-button-group .components-button:hover {
  border: 1px solid #006ba1;
}

.dashicons.isActive {
  color: #0994d9;
}

/** rtl css customizer **/
body.rtl #customize-controls .control-section>h3.accordion-section-title:after {
  right: auto;
}

body.rtl .components-custom-gradient-picker__gradient-bar {
  border-radius: 2px;
  margin-top: 12px;
  width: 100%;
  height: 48px;
  margin-bottom: 20px;
  padding-right: 10px;
  padding-left: 0;
  margin-right: -5px;
}


body.rtl .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover {
  left: auto!important;
  right: -270px!important;
}

body.rtl .customize-control-preset-gradient-picker .components-popover__content .components-popover__content {
  position: absolute!important;
  margin: 0!important;
  right: 178px;
  bottom: 50vh;
  left: auto;
}

body.rtl .customize-responsive-box-control .responsive-icons, 
body.rtl .customize-responsive-range-control .responsive-icons {
  right: auto;
  left: 8px;
}

body.rtl .newsmatic-typography-popover .components-popover__content .typo-fields .typo-field .responsive-icons {
  right: auto;
  left: 19px;
}

body.rtl .newsmatic-typography-popover .typo-field .reset-button {
  right: auto;
  left: 80px;
}

body.rtl #customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-control-fields.isShow {
  left: auto;
  right: 310px;
}

body.rtl #customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item,
body.rtl .customize-video-playlist-control .block-item .block-header,
body.rtl .customize-block-repeater-control .block-item .block-header {
  padding: 0 12px 0 0px;
}

body.rtl .customize-color-group-control .components-popover__content .components-popover__content, .customize-color-group-picker-control .components-popover__content .components-popover__content, 
body.rtl .customize-color-image-group-control .components-popover__content .components-popover__content, .customize-color-picker-control .components-popover__content .components-popover__content, 
body.rtl .customize-preset-color-picker-control .components-popover__content .components-popover__content {
  position: absolute!important;
  left: auto;
  bottom: 35vh;
  top: auto;
  right: 340px!important;
}

body.rtl .customize-color-image-group-control .components-popover.components-dropdown__content.components-custom-gradient-picker__color-picker-popover .components-popover__content {
width: 247px;
top: auto;
left: auto;
right: 425px!important;
}


body.rtl .post-query-field .components-popover.components-dropdown__content {
  left: auto!important;
  right: 80px;
}

body.rtl .layout-list li:hover:after {
  right: auto;
  left: 0px;
  border-radius: 0 10px 10px 0;
}

body #customize-control-opinons_items .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading,
body .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap .display-icon, 
body .newsmatic-repeater-control-inner .newsmatic-repeater-item .item-heading-wrap .item-heading {
cursor: all-scroll;
}

body .components-circular-option-picker {
min-width: 200px;
}



.components-base-control.components-range-control {
  margin-top: 8px;
}

.customize-control span.control-limit-upgrade-notice {
  color: red;
  font-style: italic;
  font-size: 12px;
}

/* color dropdown fixed */
#customize-theme-controls .customize-pane-child.accordion-section-content {
  height: 100%;
}

/* .customize-control-color-group-picker .components-dropdown__content .components-popover__content {
  padding: 2px 0px;
} */

.components-custom-gradient-picker .components-popover__content {
  width: 250px;
}

#sub-accordion-section-newsmatic_sidebar_options_section .customize-control-radio-image .buttonset label.ui-button {
  flex: 0 1 45%;
}

/*************************
  Radio Bubble Control
*************************/
.customize-block-repeater-control span.radio-bubble.isActive,
.customize-radio-bubble-control span.radio-bubble.isActive,
.components-popover__content span.radio-bubble.isActive
{
background: #007cba;
border-color: #007cba;
color: #fff;
}

.customize-block-repeater-control span.radio-bubble,
.customize-radio-bubble-control span.radio-bubble,
.customize-radio-bubble-control div.radio-bubble,
.components-popover__content span.radio-bubble

{
  cursor: pointer;
  padding: 4px;
  border: 1px solid #fff;
  border-radius: 5px;
  font-size: 10px;
  margin: 4px;
  background: #fff;
  box-shadow: 1px 1px 3px 3px #e4dddd;
}

.radio-bubbles.column-2{
display: flex;
padding: 0 5px;
}

.radio-bubbles.column-4 {
padding: 0 5px;
text-align: center;
}

.radio-bubbles.column-2 > span,
.radio-bubbles.column-4 > span {
flex: 1;
text-align: center;
flex-wrap: wrap;
}

.customize-block-repeater-control .column-4 span.radio-bubble,
.customize-radio-bubble-control .column-4 span.radio-bubble,
.components-popover__content .column-4 span.radio-bubble {
width: 50px;
display: inline-block;
}

span.radio-bubble:hover {
background: #007cba;
border-color: #007cba;
color: #fff;
}

#customize-control-ticker_news_categories {
margin-top: 0;
background-color: #ffffff;
display: block;
margin-bottom: 0;
}

#customize-control-ticker_news_categories .customize-multiselect-control {
padding:10px;
}

#customize-control-ticker_news_date_filter,
#customize-control-main_banner_date_filter,
.components-popover__content .components-dropdown__content .radio-bubbles.column-4,
#sub-accordion-section-newsmatic_top_header_section #customize-control-top_header_ticker_news_date_filter {
box-shadow: 0px 4px 4px 0 rgb(181 181 181 / 75%);
  -webkit-box-shadow: 0px 4px 4px 0 rgb(181 181 181 / 75%);
  -moz-box-shadow: 0px 4px 4px 0 rgb(181 181 181 / 75%);
  background-color: #fff;
  margin-top: 0;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

#customize-control-main_banner_slider_categories .customize-multiselect-control, 
#customize-control-ticker_news_categories .customize-multiselect-control,
#sub-accordion-section-newsmatic_top_header_section .customize-multiselect-control
{
  padding: 10px;
}

#customize-control-main_banner_slider_categories, #customize-control-ticker_news_categories, 
.components-popover__content .components-dropdown__content .css-b62m3t-container,
#sub-accordion-section-newsmatic_top_header_section #customize-control-top_header_ticker_news_categories {
  margin-top: 0;
  background-color: #fff;
  display: block;
  margin-bottom: 0;
}

#customize-control-ticker_news_post_filter,
#customize-control-main_banner_post_filter,
.components-popover__content .components-dropdown__content .radio-bubbles.column-2,
#sub-accordion-section-newsmatic_top_header_section #customize-control-top_header_ticker_news_post_filter{
box-shadow: 0px -2px 5px 0px rgba(181,181,181,0.75);
-webkit-box-shadow: 0px -2px 5px 0px rgba(181,181,181,0.75);
-moz-box-shadow: 0px -2px 5px 0px rgba(181,181,181,0.75);
background-color: #fff;
margin-bottom: 0;
padding: 10px 5px 5px 5px;
box-sizing: border-box;
margin-top: 15px;
}

.post-query-field .radio-bubbles.column-2 {
padding: 5px 5px 8px;
}

.post-query-field .radio-bubbles.column-4 {
padding: 8px 5px 10px;
margin-bottom: 0 !important;
}

.post-query-field .radio-bubbles.column-2>span,
.post-query-field .radio-bubbles.column-4>span {
line-height: 2;
}

/* Repeater popup */
.customize-control-block-repeater .components-popover {
  position: fixed!important;
}
.customize-control-block-repeater .components-dropdown__content .components-popover__content {
  padding: 10px;
  height: 370px;
  overflow-y: scroll;
}
.customize-control-block-repeater .components-popover.components-dropdown__content .components-popover__content .components-popover__content {
  height: 400px;
  overflow-y: scroll;
}

/** Typography **/
.newsmatic-typography-popover .components-dropdown__content .components-popover__content {
  padding: 8px 5px;
  height: 367px;
  overflow-y: hidden;
}


.customize-color-group-control .newsmatic-group-tab-panel {
  padding: 5px;
}

.customize-control-block-repeater .components-dropdown__content.newsmatic--popover-content .components-popover__content  {
  height: auto;
  overflow: initial;
}

@media (min-width: 1600px ) {
  .customize-control-block-repeater .components-dropdown__content .components-popover__content {
    height: 460px;
  }
}



/** Box shadow controls **/
.customize-box-shadow-control {
  display: flex; 
  flex-direction: column;
}


.customize-box-shadow-control .control-inner-content {
  display: flex;
}

.customize-box-shadow-control .control-inner-content .components-dropdown {
  display: block;
  clear: both;
  width: 170px;
}

.customize-box-shadow-control .control-inner-content .box-shadow-reflector {
  width: 100%;
  height: 75px;
}

.customize-box-shadow-control .control-title {
  display: flex;
  margin-bottom: 10px;
}

.customize-box-shadow-control .control-title .reset-button{
  margin-left: 10px;
  box-shadow: none;;
}

.customize-box-shadow-control .component-color-indicator {
  width: 30px;
  height: 30px;
}
.customize-box-shadow-control .box-shadow-reflector {
  background-color: #1b841545;
  border-radius: 5px;
}

.customize-box-shadow-control .box-shadow-reflector:hover {
  cursor: pointer;
}

.box-shadow-value-holder:hover {
  border: 1px solid #0e8ecc;
  border-radius: 3px;
}








.box-shadow-value-holder .box-shadow-summ-value {
  position: relative;
  text-align: left;
}

.box-shadow-value-holder .box-shadow-summ-value {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #ddd;
  padding-right: 8px;
  transition: #f0f0f0 .1s linear;
}

.box-shadow-value-holder .summ-vals {
  padding: 6px 0 6px 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}

.box-shadow-summ-value .summ-vals .summ-val {
  display: inline-flex;
  align-items: center;
}

.box-shadow-summ-value .summ-vals i {
  margin: 0 7px;
  font-style: normal;
  font-size: 70%;
  opacity: .5;
  line-height: normal;
  position: relative;
  margin-top: -5px;
}

.box-shadow-summ-value .append-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  opacity: .7;
  color: inherit;
}

.customize-box-shadow-control .control-inner-content .components-dropdown:first-child {
  flex: 0 1 80%;
  text-align: center;
  align-items: center;
  border-radius: 3px;
}
.customize-box-shadow-control .control-inner-content .components-dropdown:last-child {
  flex: 0 1 20%;
  justify-content: flex-end;
  text-align: right;
}

.customize-box-shadow-control .components-dropdown:first-child .components-popover__content {
  width: 200px;
  text-align: left;
}



/** radio button **/
.components-base-control.components-toggle-control {
  margin-bottom: 6px;
}

.customize-control {
  margin-bottom: 8px;
}

/* Front sections ui */
#sub-accordion-section-newsmatic_full_width_section #customize-control-homepage_content_order .sort-item.full_width_section,
#sub-accordion-section-newsmatic_leftc_rights_section #customize-control-homepage_content_order .sort-item.leftc_rights_section,
#sub-accordion-section-newsmatic_lefts_rightc_section #customize-control-homepage_content_order .sort-item.lefts_rightc_section,
#sub-accordion-section-newsmatic_bottom_full_width_section #customize-control-homepage_content_order .sort-item.bottom_full_width_section,
#sub-accordion-section-newsmatic_video_playlist_section #customize-control-homepage_content_order .sort-item.video_playlist {
  border-top: 2px solid #0071a1;
}



.components-popover.components-dropdown__content {
  width: auto;
}

.customize-control-color-group .components-circular-option-picker .components-circular-option-picker__custom-clear-wrapper {
  margin-top: 0;
}

.customize-control-color-group .newsmatic-group-tab-panel,
.customize-control-color-group .components-popover__content {
  width: auto;
  margin-left: 5px;
}

.customize-control-box-shadow .react-colorful__saturation {
  height: 110px!important;
  border-radius: 6px!important;
}

.customize-control-box-shadow .dashicons-image-rotate {
  font-size: 12px;
  width: auto;
  height: auto;
}

.customize-control-box-shadow .components-popover__content {
  width: auto;
}

.components-dropdown__content .components-popover__content {
  padding: 15px;
}


.components-popover .components-color-picker {
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: -12px;
}

.components-dropdown__content .components-popover__content .react-colorful {
  width: 190px;
}

.components-popover__content .react-colorful__saturation {
  height: 100px!important;
}
.color-group-inner-wrap .components-popover.components-dropdown__content {
  margin-left: 10px;
}



/** color dropdown design **/
.components-custom-gradient-picker__markers-container .components-popover.components-dropdown__content.components-color-palette__custom-color-dropdown-content {
  top: 100px!important;
}



.customize-upsell-control .upsell-inner-wrap .button-icon{
  text-align: center;
  background-color: #152384;
  border-radius: 5px;
}

.customize-upsell-control .upsell-inner-wrap .button-icon .components-button.is-primary {
  background-color: #152384;
  -webkit-box-shadow: 2px 2px 5px rgb(0 0 0 / 30%);
  box-shadow: 2px 2px 5px rgb(0 0 0 / 30%);
  border-radius: 5px;
}

.customize-upsell-control .upsell-inner-wrap .button-icon .components-button.is-primary:hover {
  box-shadow: 2px 2px 5px rgb(0 0 0 / 30%), inset 0 0 0 99999px rgb(0 0 0 / 20%);
  -webkit-box-shadow: 2px 2px 5px rgb(0 0 0 / 30%), inset 0 0 0 99999px rgb(0 0 0 / 20%);
  }

.customize-upsell-control .upsell-inner-wrap {
  position: relative;
  padding: 0;
  background: #152384;
  border-radius: 5px;
}

.customize-upsell-control .upsell-inner-wrap .button-icon {
  height: 28px;
  transition: 0.3s;
}

.customize-upsell-control .upsell-inner-wrap .components-dropdown {
  width: 100%;
}

.customize-upsell-control .upsell-inner-wrap .button-icon i {
  color: #ffffff;
  font-size: 15px;
  vertical-align: middle;

  position: absolute;
  left: 8px;
  top: 5px;
}

.upsell-preview-frame {
  position: absolute;
  visibility: hidden;
}
.customize-upsell-control .upsell-inner-wrap img {
  border-radius: 5px;
  border: 2px solid #152384;
  right: 0;
  z-index: 99;
  position: absolute;
  bottom: auto;
  top: 39px;
  width: 170px;
  height: auto;
}

.customize-upsell-control .upsell-inner-wrap:hover img {
  visibility: visible;

}
.customize-upsell-control .upsell-inner-wrap:hover:after {
  content: '';
  position: absolute;
  right: 80px;
  top: 103%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #152384;
  clear: both;
  background: transparent;
}

.customize-upsell-control .upsell-inner-wrap .upsell-button {
  width: 100%;
  padding-left: 30px;
  padding-top: 2px;
}

.customize-upsell-control .upsell-inner-wrap .button-icon:hover{
  box-shadow: 2px 2px 5px rgb(0 0 0 / 30%), inset 0 0 0 99999px rgb(0 0 0 / 20%);
  -webkit-box-shadow: 2px 2px 5px rgb(0 0 0 / 30%), inset 0 0 0 99999px rgb(0 0 0 / 20%);
}


.upsell-inner-wrap.request-button:hover:after {
  display: none;
}

.components-popover__content .icon-picker-modal {
  display: flex;
  flex-wrap: wrap;
  width: 180px;
}


.components-popover__content .icon-picker-modal i{
  padding: 5px 7px;
  font-size: 14px;
}



.components-popover__content .block-content {
  width: 250px;
  height: 300px;
  overflow-y: scroll;
}

.components-popover__content .block-content > div {
  width: 90%;
  margin: 5px auto;
}

.components-popover__content > div.components-surface {
  box-shadow: none;
}

.components-popover__content .components-surface .components-card__body {
  padding: 10px;
  height: 300px;
  overflow-y: scroll; 
}




/*
========================================================
31.0 Loader Css
========================================================
*/

:root {
  --nm-loading-color : #1b8415;
  --nm-loader-icon-width: 20px;
  --nm-loader-icon-height: 20px;
}

.newsmatic_loading_box {
  text-align: center;
}
.box {
  display: inline-block;

  border: 1px solid #289dcc;
  border-radius: 3px;
  font-size: 3px;

  position: relative;
  margin-bottom: 0.25em;
  vertical-align: top;
  transition: .3s color,.3s border,.3s transform,.3s opacity;
  text-align: center;
  vertical-align: middle;

  width: 50px;
  height: 30px;
  top: 0;
  padding-bottom: 0;
  padding: 5px;
  vertical-align: middle;
  padding-top: 15px;
  margin: 5px;
}

.box.active {
  margin: 4px;
  border-width: 2px;
  border-color: #2271b1;
}

.newsmatic_loading_box button {
  display: inline-block;
  background: transparent;
  border: 2px solid #289dcc;
  color: white;
  padding: 0.5em 1em;
  border-radius: 5px;
  font-size: 20px;
}

.newsmatic_loading_box [class*=loader-] {
  display: inline-block;
  width: var(--nm-loader-icon-width);
  height: var(--nm-loader-icon-height);
  color: inherit;
  vertical-align: middle;
  pointer-events: none;
}

.newsmatic_loading_box .loader-1 {
  border: 0.2em dotted var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: 1s loader-1 linear infinite;
          animation: 1s loader-1 linear infinite;
}

@-webkit-keyframes loader-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-1 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-2 {
  border: 0.2em solid transparent;
  border-left-color: var(--nm-loading-color);
  border-right-color: var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: 1s loader-2 linear infinite;
          animation: 1s loader-2 linear infinite;
}

@-webkit-keyframes loader-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-2 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-3 {
  border: 0.2em solid var(--nm-loading-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  -webkit-animation: 1s loader-3 linear infinite;
          animation: 1s loader-3 linear infinite;
  position: relative;
}

@-webkit-keyframes loader-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-3 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-4 {
  border: 1px solid var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: 1s loader-4 linear infinite;
          animation: 1s loader-4 linear infinite;
  position: relative;
}
.newsmatic_loading_box .loader-4:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  top: -0.2em;
  left: 50%;
  border: 0.2em solid var(--nm-loading-color);
  border-radius: 50%;
}

@-webkit-keyframes loader-4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-4 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-5 {
  border: 0.2em solid transparent;
  border-top-color: var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: 1s loader-5 linear infinite;
          animation: 1s loader-5 linear infinite;
  position: relative;
}
.newsmatic_loading_box .loader-5:before {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  position: absolute;
  top: -0.2em;
  left: -0.2em;
  border: 0.2em solid var(--nm-loading-color);
  border-radius: 50%;
  opacity: 0.5;
}

@-webkit-keyframes loader-5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-5 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-6 {
  border: 0.2em solid var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: loader-6 1s ease-out infinite;
          animation: loader-6 1s ease-out infinite;
}

@-webkit-keyframes loader-6 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes loader-6 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.newsmatic_loading_box .loader-7 {
  border: 0 solid transparent;
  border-radius: 50%;
  position: relative;
}
.newsmatic_loading_box .loader-7:before, .loader-7:after {
  content: "";
  border: 0.2em solid var(--nm-loading-color);
  border-radius: 50%;
  width: inherit;
  height: inherit;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: loader-7 1s linear infinite;
          animation: loader-7 1s linear infinite;
  opacity: 0;
}
.newsmatic_loading_box .loader-7:before {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.newsmatic_loading_box .loader-7:after {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
}

@-webkit-keyframes loader-7 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes loader-7 {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.newsmatic_loading_box .loader-8 {
  position: relative;
}
.newsmatic_loading_box .loader-8:before, .loader-8:after {
  content: "";
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: var(--nm-loading-color);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: loader-8 2s infinite ease-in-out;
          animation: loader-8 2s infinite ease-in-out;
}
.newsmatic_loading_box .loader-8:after {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

@-webkit-keyframes loader-8 {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}

@keyframes loader-8 {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
.newsmatic_loading_box .loader-9 {
  background-color: var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: loader-9 1s infinite ease-in-out;
          animation: loader-9 1s infinite ease-in-out;
}

@-webkit-keyframes loader-9 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@keyframes loader-9 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.newsmatic_loading_box .loader-10 {
  position: relative;
  -webkit-animation: loader-10-1 2s infinite linear;
          animation: loader-10-1 2s infinite linear;
}
.newsmatic_loading_box .loader-10:before, .loader-10:after {
  content: "";
  width: 0;
  height: 0;
  border: 0.5em solid var(--nm-loading-color);
  display: block;
  position: absolute;
  border-radius: 100%;
  -webkit-animation: loader-10-2 2s infinite ease-in-out;
          animation: loader-10-2 2s infinite ease-in-out;
}
.newsmatic_loading_box .loader-10:before {
  top: 0;
  left: 50%;
}
.newsmatic_loading_box .loader-10:after {
  bottom: 0;
  right: 50%;
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}

@-webkit-keyframes loader-10-1 {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-10-1 {
  100% {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes loader-10-2 {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
@keyframes loader-10-2 {
  0%, 100% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
}
.newsmatic_loading_box .loader-11 {
  background-color: var(--nm-loading-color);
  -webkit-animation: loader-11 1.2s infinite ease-in-out;
          animation: loader-11 1.2s infinite ease-in-out;
}

@-webkit-keyframes loader-11 {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}

@keyframes loader-11 {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
  }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
  }
}
.newsmatic_loading_box .loader-12 {
  position: relative;
}
.newsmatic_loading_box .loader-12:before, .loader-12:after {
  content: "";
  display: block;
  position: absolute;
  background-color: var(--nm-loading-color);
  left: 50%;
  right: 0;
  top: 0;
  bottom: 50%;
  box-shadow: -0.5em 0 0 var(--nm-loading-color);
  -webkit-animation: loader-12 1s linear infinite;
          animation: loader-12 1s linear infinite;
}
.newsmatic_loading_box .loader-12:after {
  top: 50%;
  bottom: 0;
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
}

@-webkit-keyframes loader-12 {
  0%, 100% {
    box-shadow: -0.5em 0 0 transparent;
    background-color: var(--nm-loading-color);
  }
  50% {
    box-shadow: -0.5em 0 0 var(--nm-loading-color);
    background-color: transparent;
  }
}

@keyframes loader-12 {
  0%, 100% {
    box-shadow: -0.5em 0 0 transparent;
    background-color: var(--nm-loading-color);
  }
  50% {
    box-shadow: -0.5em 0 0 var(--nm-loading-color);
    background-color: transparent;
  }
}
.newsmatic_loading_box .loader-13:before,
.newsmatic_loading_box .loader-13:after,
.newsmatic_loading_box .loader-13 {
  border-radius: 50%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: loader-13 1.8s infinite ease-in-out;
          animation: loader-13 1.8s infinite ease-in-out;
}

.newsmatic_loading_box .loader-13 {
  color: var(--nm-loading-color);
  position: relative;
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
  top: -1em;
}
.newsmatic_loading_box .loader-13:before {
  right: 100%;
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.newsmatic_loading_box .loader-13:after {
  left: 100%;
}
.newsmatic_loading_box .loader-13:before, .loader-13:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  width: inherit;
  height: inherit;
}

@-webkit-keyframes loader-13 {
  0%, 80%, 100% {
    box-shadow: 0 1em 0 -1em;
  }
  40% {
    box-shadow: 0 1em 0 -0.2em;
  }
}

@keyframes loader-13 {
  0%, 80%, 100% {
    box-shadow: 0 1em 0 -1em;
  }
  40% {
    box-shadow: 0 1em 0 -0.2em;
  }
}
.newsmatic_loading_box .loader-14 {
  border-radius: 50%;
  box-shadow: 0 1em 0 -0.2em var(--nm-loading-color);
  position: relative;
  -webkit-animation: loader-14 0.8s ease-in-out alternate infinite;
          animation: loader-14 0.8s ease-in-out alternate infinite;
  -webkit-animation-delay: 0.32s;
          animation-delay: 0.32s;
  top: -1em;
}
.newsmatic_loading_box .loader-14:after, .loader-14:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  box-shadow: inherit;
  -webkit-animation: inherit;
          animation: inherit;
}
.newsmatic_loading_box .loader-14:before {
  left: -1em;
  -webkit-animation-delay: 0.48s;
          animation-delay: 0.48s;
}
.newsmatic_loading_box .loader-14:after {
  right: -1em;
  -webkit-animation-delay: 0.16s;
          animation-delay: 0.16s;
}

@-webkit-keyframes loader-14 {
  0% {
    box-shadow: 0 2em 0 -0.2em var(--nm-loading-color);
  }
  100% {
    box-shadow: 0 1em 0 -0.2em var(--nm-loading-color);
  }
}

@keyframes loader-14 {
  0% {
    box-shadow: 0 2em 0 -0.2em var(--nm-loading-color);
  }
  100% {
    box-shadow: 0 1em 0 -0.2em var(--nm-loading-color);
  }
}
.newsmatic_loading_box .loader-15 {
  background: var(--nm-loading-color);
  position: relative;
  -webkit-animation: loader-15 1s ease-in-out infinite;
          animation: loader-15 1s ease-in-out infinite;
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
  width: 0.25em;
  height: 0.5em;
  margin: 0 0.5em;
}
.newsmatic_loading_box .loader-15:after, .loader-15:before {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  background: inherit;
  -webkit-animation: inherit;
          animation: inherit;
}
.newsmatic_loading_box .loader-15:before {
  right: 0.5em;
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
.newsmatic_loading_box .loader-15:after {
  left: 0.5em;
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}

@-webkit-keyframes loader-15 {
  0%, 100% {
    box-shadow: 0 0 0 var(--nm-loading-color), 0 0 0 var(--nm-loading-color);
  }
  50% {
    box-shadow: 0 -0.25em 0 var(--nm-loading-color), 0 0.25em 0 var(--nm-loading-color);
  }
}

@keyframes loader-15 {
  0%, 100% {
    box-shadow: 0 0 0 var(--nm-loading-color), 0 0 0 var(--nm-loading-color);
  }
  50% {
    box-shadow: 0 -0.25em 0 var(--nm-loading-color), 0 0.25em 0 var(--nm-loading-color);
  }
}
.newsmatic_loading_box .loader-16 {
  transform: rotateZ(45deg);
  perspective: 1000px;
  border-radius: 50%;
}
.newsmatic_loading_box .loader-16:before, .newsmatic_loading_box .loader-16:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  -webkit-animation: 1s spin linear infinite;
          animation: 1s spin linear infinite;
}
.newsmatic_loading_box .loader-16:before {
  transform: rotateX(70deg);
}
.newsmatic_loading_box .loader-16:after {
  transform: rotateY(70deg);
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}

@keyframes rotate {
  0% {
    transform: translate(-50%, -50%) rotateZ(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotateZ(360deg);
  }
}
@-webkit-keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@keyframes rotateccw {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}
@-webkit-keyframes spin {
  0%, 100% {
    box-shadow: 0.2em 0px 0 0px var(--nm-loading-color);
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 var(--nm-loading-color);
  }
  25% {
    box-shadow: 0 0.2em 0 0px var(--nm-loading-color);
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 var(--nm-loading-color);
  }
  50% {
    box-shadow: -0.2em 0 0 0 var(--nm-loading-color);
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 var(--nm-loading-color);
  }
  75% {
    box-shadow: 0px -0.2em 0 0 var(--nm-loading-color);
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 var(--nm-loading-color);
  }
}
@keyframes spin {
  0%, 100% {
    box-shadow: 0.2em 0px 0 0px var(--nm-loading-color);
  }
  12% {
    box-shadow: 0.2em 0.2em 0 0 var(--nm-loading-color);
  }
  25% {
    box-shadow: 0 0.2em 0 0px var(--nm-loading-color);
  }
  37% {
    box-shadow: -0.2em 0.2em 0 0 var(--nm-loading-color);
  }
  50% {
    box-shadow: -0.2em 0 0 0 var(--nm-loading-color);
  }
  62% {
    box-shadow: -0.2em -0.2em 0 0 var(--nm-loading-color);
  }
  75% {
    box-shadow: 0px -0.2em 0 0 var(--nm-loading-color);
  }
  87% {
    box-shadow: 0.2em -0.2em 0 0 var(--nm-loading-color);
  }
}
.newsmatic_loading_box .loader-17 {
  position: relative;
  background-color: var(--nm-loading-color);
  border-radius: 50%;
}
.newsmatic_loading_box .loader-17:after,.newsmatic_loading_box  .loader-17:before {
  content: "";
  position: absolute;
  width: 0.25em;
  height: 0.25em;
  border-radius: 50%;
  opacity: 0.8;
}
.newsmatic_loading_box .loader-17:after {
  left: -0.5em;
  top: -0.25em;
  background-color: var(--nm-loading-color);
  transform-origin: 0.75em 1em;
  -webkit-animation: loader-17 1s linear infinite;
          animation: loader-17 1s linear infinite;
  opacity: 0.6;
}
.newsmatic_loading_box .loader-17:before {
  left: -1.25em;
  top: -0.75em;
  background-color: var(--nm-loading-color);
  transform-origin: 1.5em 1em;
  -webkit-animation: loader-17 2s linear infinite;
          animation: loader-17 2s linear infinite;
}

@-webkit-keyframes loader-17 {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}

@keyframes loader-17 {
  0% {
    transform: rotateZ(0deg) translate3d(0, 0, 0);
  }
  100% {
    transform: rotateZ(360deg) translate3d(0, 0, 0);
  }
}
.newsmatic_loading_box .loader-18 {
  position: relative;
}
.newsmatic_loading_box .loader-18:before,.newsmatic_loading_box  .loader-18:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 50%;
  border: 0.1em solid transparent;
  border-bottom-color: var(--nm-loading-color);
  top: 0;
  left: 0;
  -webkit-animation: 1s loader-18 linear infinite;
          animation: 1s loader-18 linear infinite;
}
.newsmatic_loading_box .loader-18:before {
  width: 1em;
  height: 1em;
}
.newsmatic_loading_box .loader-18:after {
  width: 0.8em;
  height: 0.8em;
  top: 0.1em;
  left: 0.1em;
  animation-direction: reverse;
}

@-webkit-keyframes loader-18 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-18 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-19 {
  border-top: 0.2em solid var(--nm-loading-color);
  border-right: 0.2em solid transparent;
  -webkit-animation: loader-19 1s linear infinite;
          animation: loader-19 1s linear infinite;
  border-radius: 100%;
  position: relative;
}

@-webkit-keyframes loader-19 {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loader-19 {
  to {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-20 {
  background-color: transparent;
  box-shadow: inset 0px 0px 0px 0.1em var(--nm-loading-color);
  border-radius: 50%;
  position: relative;
}
.newsmatic_loading_box .loader-20:after,.newsmatic_loading_box  .loader-20:before {
  position: absolute;
  content: "";
  background-color: var(--nm-loading-color);
  top: 0.5em;
  left: 0.5em;
  height: 0.1em;
  transform-origin: left center;
}
.newsmatic_loading_box .loader-20:after {
  width: 0.4em;
  -webkit-animation: loader-20 2s linear infinite;
          animation: loader-20 2s linear infinite;
}
.newsmatic_loading_box .loader-20:before {
  width: 0.3em;
  -webkit-animation: loader-20 8s linear infinite;
          animation: loader-20 8s linear infinite;
}

@-webkit-keyframes loader-20 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-20 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.newsmatic_loading_box .loader-21 {
  position: relative;
}
.newsmatic_loading_box .loader-21:before, .newsmatic_loading_box .loader-21:after {
  position: absolute;
  content: "";
}
.newsmatic_loading_box .loader-21:before {
  width: 80%;
  height: 80%;
  left: 10%;
  bottom: 10%;
  border-radius: 100% 100% 100% 0;
  box-shadow: 0px 0px 0px 0.1em var(--nm-loading-color);
  -webkit-animation: loader-21 1s linear infinite;
          animation: loader-21 1s linear infinite;
  transform: rotate(-46deg);
}
.newsmatic_loading_box .loader-21:after {
  width: 1em;
  height: 0.3em;
  border-radius: 100%;
  left: 0;
  background-color: rgba(255, 255, 255, 0.2);
  bottom: -0.2em;
  z-index: -1;
}

@-webkit-keyframes loader-21 {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}

@keyframes loader-21 {
  0% {
    top: 0;
  }
  50% {
    top: -5px;
  }
  100% {
    top: 0;
  }
}
.newsmatic_loading_box .loader-22 {
  border: 0.1em var(--nm-loading-color) solid;
  border-radius: 100%;
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.newsmatic_loading_box .loader-22:after, .newsmatic_loading_box .loader-22:before {
  position: absolute;
  content: "";
  background-color: var(--nm-loading-color);
}
.newsmatic_loading_box .loader-22:after {
  width: 50%;
  height: 0.1em;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  -webkit-animation: loader-22 2s linear infinite alternate;
          animation: loader-22 2s linear infinite alternate;
}
.newsmatic_loading_box .loader-22:before {
  width: 100%;
  height: 40%;
  left: 0;
  bottom: 0;
}

@-webkit-keyframes loader-22 {
  0% {
    transform: rotate(-160deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}

@keyframes loader-22 {
  0% {
    transform: rotate(-160deg);
  }
  100% {
    transform: rotate(-20deg);
  }
}
.newsmatic_loading_box .loader-23 {
  height: 0.5em;
  border: 0.1em var(--nm-loading-color) solid;
  border-radius: 0.1em;
  position: relative;
  -webkit-animation: loader-23 5s linear infinite;
          animation: loader-23 5s linear infinite;
}
.newsmatic_loading_box .loader-23:after {
  width: 0.07em;
  height: 100%;
  background-color: var(--nm-loading-color);
  border-radius: 0px 0.5em 0.5em 0px;
  position: absolute;
  content: "";
  top: 0;
  left: calc(100% + .1em);
}

@-webkit-keyframes loader-23 {
  0% {
    box-shadow: inset 0px 0px 0px var(--nm-loading-color);
  }
  100% {
    box-shadow: inset 1em 0px 0px var(--nm-loading-color);
  }
}

@keyframes loader-23 {
  0% {
    box-shadow: inset 0px 0px 0px var(--nm-loading-color);
  }
  100% {
    box-shadow: inset 1em 0px 0px var(--nm-loading-color);
  }
}
.newsmatic_loading_box .loader-24 {
  width: 0.8em;
  height: 1em;
  border: 0.1em var(--nm-loading-color) solid;
  border-radius: 0px 0px 0.2em 0.2em;
  position: relative;
}
.newsmatic_loading_box .loader-24:after, .newsmatic_loading_box .loader-24:before {
  position: absolute;
  content: "";
}
.newsmatic_loading_box .loader-24:after {
  width: 0.2em;
  height: 50%;
  border: 0.1em var(--nm-loading-color) solid;
  border-left: none;
  border-radius: 0px 0.5em 0.5em 0px;
  left: calc(100% + .1em);
  top: 0.1em;
}
.newsmatic_loading_box .loader-24:before {
  width: 0.1em;
  height: 0.3em;
  background-color: var(--nm-loading-color);
  top: -0.3em;
  left: 0.05em;
  box-shadow: 0.2em 0px 0px 0px var(--nm-loading-color), 0.2em -0.2em 0px 0px var(--nm-loading-color), 0.4em 0px 0px 0px var(--nm-loading-color);
  -webkit-animation: loader-24 1s linear infinite alternate;
          animation: loader-24 1s linear infinite alternate;
}

@-webkit-keyframes loader-24 {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}

@keyframes loader-24 {
  0% {
    height: 0px;
  }
  100% {
    height: 6px;
  }
}
.newsmatic_loading_box .loader-25 {
  border: 0.1em var(--nm-loading-color) solid;
  position: relative;
  -webkit-animation: loader-25-1 5s linear infinite;
          animation: loader-25-1 5s linear infinite;
}
.newsmatic_loading_box .loader-25:after {
  width: 0.2em;
  height: 0.2em;
  position: absolute;
  content: "";
  background-color: var(--nm-loading-color);
  bottom: calc(100% + .2em);
  left: -0.4em;
  -webkit-animation: loader-25-2 1s ease-in-out infinite;
          animation: loader-25-2 1s ease-in-out infinite;
}

@-webkit-keyframes loader-25-1 {
  0% {
    box-shadow: inset 0 0 0 0 var(--nm-loading-color);
  }
  100% {
    box-shadow: inset 0 -1em 0 0 var(--nm-loading-color);
  }
}

@keyframes loader-25-1 {
  0% {
    box-shadow: inset 0 0 0 0 var(--nm-loading-color);
  }
  100% {
    box-shadow: inset 0 -1em 0 0 var(--nm-loading-color);
  }
}
@-webkit-keyframes loader-25-2 {
  25% {
    left: calc(100% + .2em);
    bottom: calc(100% + .2em);
  }
  50% {
    left: calc(100% + .2em);
    bottom: -0.4em;
  }
  75% {
    left: -0.4em;
    bottom: -0.4em;
  }
  100% {
    left: -0.4em;
    bottom: calc(100% + .2em);
  }
}
@keyframes loader-25-2 {
  25% {
    left: calc(100% + .2em);
    bottom: calc(100% + .2em);
  }
  50% {
    left: calc(100% + .2em);
    bottom: -0.4em;
  }
  75% {
    left: -0.4em;
    bottom: -0.4em;
  }
  100% {
    left: -0.4em;
    bottom: calc(100% + .2em);
  }
}
.newsmatic_loading_box .loader-26 {
  width: 0.5em;
  height: 0.5em;
  background-color: var(--nm-loading-color);
  box-shadow: 1em 0px 0px var(--nm-loading-color);
  border-radius: 50%;
  -webkit-animation: loader-26 1s ease-in-out infinite alternate;
          animation: loader-26 1s ease-in-out infinite alternate;
}

@-webkit-keyframes loader-26 {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1.2);
  }
}

@keyframes loader-26 {
  0% {
    opacity: 0.1;
    transform: rotate(0deg) scale(0.5);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg) scale(1.2);
  }
}
.newsmatic_loading_box .loader-27 {
  box-shadow: inset 0 0 0 0.1em var(--nm-loading-color);
  border-radius: 50%;
  position: relative;
  margin-left: 1.2em;
}
.newsmatic_loading_box .loader-27:before {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 50%;
  position: absolute;
  right: 1.2em;
  top: 0;
  box-shadow: inset 0 0 0 0.1em var(--nm-loading-color);
}
.newsmatic_loading_box .loader-27:after {
  border: 0.2em solid var(--nm-loading-color);
  box-shadow: -1.2em 0 0 0 var(--nm-loading-color);
  width: 0;
  height: 0;
  border-radius: 50%;
  left: 50%;
  top: 25%;
  position: absolute;
  content: "";
  -webkit-animation: loader-27 2s linear infinite alternate;
          animation: loader-27 2s linear infinite alternate;
}

@-webkit-keyframes loader-27 {
  0% {
    left: 0;
  }
  100% {
    left: 0.5em;
  }
}

@keyframes loader-27 {
  0% {
    left: 0;
  }
  100% {
    left: 0.5em;
  }
}
.newsmatic_loading_box .loader-28 {
  position: relative;
  -webkit-animation: 2s loader-28 infinite;
          animation: 2s loader-28 infinite;
}
.newsmatic_loading_box .loader-28:before {
  content: "";
  display: block;
  width: inherit;
  height: inherit;
  border-radius: 80% 20%;
  border: 0.1em solid var(--nm-loading-color);
  transform: rotate(45deg);
  border-width: 0.1em 0.05em 0.05em 0.1em;
}
.newsmatic_loading_box .loader-28:after {
  content: "";
  display: block;
  width: 0.2em;
  height: 0.2em;
  position: absolute;
  top: 0.4em;
  left: 50%;
  border-radius: 50%;
  box-shadow: -0.07em 0.07em 0 0.1em var(--nm-loading-color);
  -webkit-animation: 2s loader-28-2 linear infinite;
          animation: 2s loader-28-2 linear infinite;
}

@-webkit-keyframes loader-28 {
  0%, 100% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleY(0);
  }
  20% {
    transform: scaleY(1);
  }
}

@keyframes loader-28 {
  0%, 100% {
    transform: scaleY(1);
  }
  10% {
    transform: scaleY(0);
  }
  20% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes loader-28 {
  0%, 100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-100%);
  }
  50% {
    transform: transalteX(200%);
  }
}
@keyframes loader-28 {
  0%, 100% {
    transform: translateX(0);
  }
  30% {
    transform: translateX(-100%);
  }
  50% {
    transform: transalteX(200%);
  }
}
.newsmatic_loading_box .loader-29 {
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.1em var(--nm-loading-color), -0.5em -0.5em 0 -0.4em var(--nm-loading-color), 0 -0.7em 0 -0.4em var(--nm-loading-color), 0.5em -0.5em 0 -0.4em var(--nm-loading-color), -0.5em 0.5em 0 -0.4em var(--nm-loading-color), 0 0.7em 0 -0.4em var(--nm-loading-color), 0.5em 0.5em 0 -0.4em var(--nm-loading-color), -0.7em 0 0 -0.4em var(--nm-loading-color), 0.7em 0 0 -0.4em var(--nm-loading-color);
  -webkit-animation: 5s loader-29 linear infinite;
          animation: 5s loader-29 linear infinite;
}

@-webkit-keyframes loader-29 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-29 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

