/* Common */
.secTitle, .secTitle a { cursor: pointer; outline: none; }

.sg .sgHC0 .sk-obj-placeholder,
.sg .sgHT0 .sk-obj-placeholder,
.sgHC0 .sk-obj-placeholder,
.sgHT0 .sk-obj-placeholder {
   display: none;
   width: 20px;
   height: 100%;
}

.secBody .secBody .sk-obj-placeholder:not(.sk-obj-placeholder-vertical),
.secBody .sk-obj-placeholder:not(.sk-obj-placeholder-vertical) {
   width: 100%;
   height: 0;
}

.sg-delim-common { display: block; }
.sg .sg-delim-common.sk-sg-last-delimiter { display: none; }

.secIconColCell {
   display: none;
   cursor: pointer;
}

.secBody .secBodyWrapper {
   box-sizing: initial;
}

/** 
 * For some reason Chrome does not consider pointer-events: none for inline/inline-block
 * elements. It considers just for block and table. Link to reproduce:
 * https://jsfiddle.net/ickata/e7uanbax/
 * 
 * Chrome issue:
 * https://bugs.chromium.org/p/chromium/issues/detail?id=733228
 */
.fmCptnWrap > span { display: table } 

/*********** COLUMNS ***********/
.sgHC0 {
   display: table;
   width: 100%;
}

.sgHC0 .sectionCell {
   display: table-cell;
   width: 100%;
}

.sgHC0 > div {
   display: table-row;
}

.sgHC0 > div > * {
   display: table-cell;
   vertical-align: top;
}

.sg .sgHC0 .sk-obj-placeholder-wrapper,
.sg .sgHT0 .sk-obj-placeholder-wrapper,
.sgHC0 .sk-obj-placeholder-wrapper,
.sgHT0 .sk-obj-placeholder-wrapper {
   position: absolute;
   width: 0;
}

.sgHC0 > div > .sk-obj-placeholder-wrapper:first-child:last-child,
.sgHT0 > div > .sk-obj-placeholder-wrapper:first-child:last-child {
   position: relative;
   width: 100%;
   height: 0;
}

.sgHC0 > div > .sk-obj-placeholder-wrapper:first-child:last-child .sk-obj-placeholder,
.sgHT0 > div > .sk-obj-placeholder-wrapper:first-child:last-child .sk-obj-placeholder {
   display: none;
   width: 100%;
   float: left;
}

.sgVCC0 > div > .sk-obj-placeholder-wrapper.sk-obj-placeholder-wrapper-last-item,
.sgVC0 > div > .sk-obj-placeholder-wrapper.sk-obj-placeholder-wrapper-last-item {
   position: absolute;
   bottom: 0;
}

.sgHC0.sg-hide-headers div.sectionCell div.secHead > .secTitle,
.sgGrid.sg-hide-headers div.sectionCell div.secHead > .secTitle {
   display: none !important;
}

.sgHC0.sg-hide-delimiters .sgDelim1 {
   display: none !important;
}

.sgHC0.sg-equal-columns {
   table-layout: fixed;
}

.em_disabled .sgHC0.sg-equal-columns{
   table-layout: auto;
}

/* revert cursor to default when no link */

.sgHC0 .nolink .secTitle,
.sgHC0 .nolink .secTitle a {
   cursor: default;
}

.sgVC0 .nolink .secTitle,
.sgVC0 .nolink .secTitle a {
   cursor: default;
}

.sgHT0 .active .secTitle,
.sgHT0 .active .secTitle a {
   cursor: default;
   z-index: 1;
}

.sgVT0 .active .secTitle,
.sgVT0 .active .secTitle a {
   cursor: default;
   z-index: 1;
}

.sgVCC0.sgAccordion .active .secTitle,
.sgVCC0.sgAccordion .active .secTitle a {
   cursor: default;
}

/* ==== New layout ==== */


/* icon visibility sections and tabs */

.wIcn.noactive .fmIcnNor { display: inline; }
.wIcn.noactive .fmIcnSel,
.wIcn.noactive .fmIcnCur { display: none; }

.wIcn.noactive .secCptn:hover .fmIcnSel { display: inline; }
.wIcn.noactive .secCptn:hover .fmIcnNor,
.wIcn.noactive .secCptn:hover .fmIcnCur { display: none; }

.wIcn.active .fmIcnCur { display: inline; }
.wIcn.active .fmIcnNor,
.wIcn.active .fmIcnSel { display: none; }


/* icon visibility classic columns and vertical */

.sgHC0 .wIcn .fmIcnNor { display: inline; }
.sgHC0 .wIcn .fmIcnSel,
.sgHC0 .wIcn .fmIcnCur { display: none; }

.sgHC0 .wIcn .secCptn:hover .fmIcnNor { display: inline; }
.sgHC0 .wIcn .secCptn:hover .fmIcnSel,
.sgHC0 .wIcn .secCptn:hover .fmIcnCur { display: none; }

.sgVC0 .wIcn .fmIcnNor { display: inline; }
.sgVC0 .wIcn .fmIcnSel,
.sgVC0 .wIcn .fmIcnCur { display: none; }

.sgVC0 .wIcn .secCptn:hover .fmIcnNor { display: inline; }
.sgVC0 .wIcn .secCptn:hover .fmIcnSel,
.sgVC0 .wIcn .secCptn:hover .fmIcnCur { display: none; }

.sgVCC0 .wIcn.active .fmIcnCur { display: inline; }
.sgVCC0 .wIcn.active .fmIcnSel,
.sgVCC0 .wIcn.active .fmIcnNor { display: none; }

.sgVCC0 .wIcn.active .secCptn:hover .fmIcnSel { display: inline; }
.sgVCC0 .wIcn.active .secCptn:hover .fmIcnNor,
.sgVCC0 .wIcn.active .secCptn:hover .fmIcnCur { display: none; }

.sgVCC0.sgAccordion .wIcn.active .fmIcnCur { display: inline; }
.sgVCC0.sgAccordion .wIcn.active .fmIcnSel,
.sgVCC0.sgAccordion .wIcn.active .fmIcnNor { display: none; }

.sgVCC0.sgAccordion .wIcn.active .secCptn:hover .fmIcnCur { display: inline; }
.sgVCC0.sgAccordion .wIcn.active .secCptn:hover .fmIcnNor,
.sgVCC0.sgAccordion .wIcn.active .secCptn:hover .fmIcnSel { display: none; }

@media screen and (max-width: 600px) {
   .sgHC0 > div { display:  block; }
   .sgHC0 > div > div  {
      width: 100% !important;
      max-width: 100% !important;
      display: block;
   }

   .sgHC0 > div .sectionCell {
      display: block;
   }

   /* Hide delimiters */
   .sgHC0 .sgDelim1 { display: none; }
   /* Ignore height equalization */
   .secBody,
   .secBodyWrapper { min-height: 0 !important }
   .sgHC0 .secBody,
   .sgHC0 .secBody .secBodyWrapper,
   .sgHC0 .secBody .secBodyWrapper .secBodyInnerWrapper,
   .sgHT0 .secBody,
   .sgHT0 .secBody .secBodyWrapper,
   .sgHT0 .secBody .secBodyWrapper .secBodyInnerWrapper,
   .sgVT0 .secBody,
   .sgVT0 .secBody .secBodyWrapper,
   .sgVT0 .secBody .secBodyWrapper .secBodyInnerWrapper { height: auto !important; min-height: 0 !important }
}

.sg .sectionCell .secCptn > span {
   display: inline-block;
}

.sg .sectionCell .secCptn > span > span {
   display: -webkit-flex;
   display: flex;
   -webkit-align-items: center;
   align-items: center;
}

.sg .sectionCell.wIcnL .fmCptnWrap,
.sg .sectionCell.wIcnR .fmIcnWrap {
   -webkit-order: 2;
   order: 2;
}

.sg .sectionCell.wIcnL .fmIcnWrap,
.sg .sectionCell.wIcnR .fmCptnWrap {
   -webkit-order: 1;
   order: 1;
}

.sgHT0 .tabButtonContainerCell,
.sg .sgHT0 .tabButtonContainerCell { display : table; }
.sgHT0 .tabButtonContainerCell > div {
   display: table-cell;
   vertical-align: middle;
}

.sgVT0 { display : table; width : 100%; }

.sgVT0 .tabButtonContainerCell,
.sgVT0 .content-wrapper { display: table-cell; vertical-align: top; }

.sgVT0 .content-wrapper { width : 100%; }

.sgVCC0 .secHead { display : table; }

/*
   Set the display to 'table-cell', after the section is rendered.
   Otherwise under IE 11, the content will jump/scroll to this section.
   This is a odd bug in IE11
 */
.sgVCC0.sk-sg-is-rendered .sgVCC0 .secHead>div,
.sgVCC0.sk-sg-is-rendered .secHead>div {
   display : table-cell;
   vertical-align: middle;
}

.sgVCC0 .sectionCell .secBody {
   padding-top: 0 !important;
}

.sg .sgHC0 .sectionCell .sk-obj-placeholder-wrapper:not(.sk-obj-placeholder-wrapper-vertical),
.sectionCell .sectionCell .sk-obj-placeholder-wrapper:not(.sk-obj-placeholder-wrapper-vertical),
.sectionCell .sk-obj-placeholder-wrapper:not(.sk-obj-placeholder-wrapper-vertical),
.sgHT0 .content-wrapper .sk-obj-placeholder-wrapper:not(.sk-obj-placeholder-wrapper-vertical) {
   position: relative;
   width: auto;
   margin: -150px 0;
   padding: 150px 0;
}

/*.sg .sgVC0 .secHead,*/
.sgHC0 .secHead,
.sgVC0 .secHead {
   display: table;
   width: 100%;
}
.sgHC0 .secHead .secTitle,
.sgVC0 .secHead .secTitle {
   display: table-cell;
   vertical-align: middle;
}

/* Break words to new line if they are to long only for section type columns, rows and colapsibles, but not for tabs */
.sgHC0 .secHead .secTitle,
.sgVC0 .secHead .secTitle,
.sgVCC0 .secHead .secTitle {
   word-break: break-word;
}

/**
 * Wrap section head content, wrap under ie11
 */
@media all and (-ms-high-contrast:none) {
   *::-ms-backdrop, .secHead {
      table-layout:fixed;
   }
   *::-ms-backdrop, .secCptn > span {
      width: 100%;
   }
}


/* Ignore word break for all tabs section types */
.sgVT0 .secHead .secTitle,
.sgHT0 .secHead .secTitle {
   word-break: normal;
}

.content-wrapper {
   position: relative;
}

.sectionCell .fmCptnWrap > span.editable {
   min-width: 1em;
   min-height: 1em;
}

.fmCptnWrap.icon-only {
   display: none !important;
}

/*--- ADMIN STYLES -----------------------------------------------------------*/

/*--- Element Menu -----------------------------------------------------------*/
.sg .em_normal:hover {
   position: relative;
}

.sg.hide {
   visibility: hidden;
}

.sgVCC0 .sectionCell.noactive .secBody {
   position: absolute;
   z-index: -1;
   opacity: 0;
   visibility: hidden;
}

.sgVC0 .sg .sectionCell {
   display: block;
}

.sg .sgHC0 .secBody {
   visibility: visible;
}

.sgHT0 .sgVT0 .tabButtonContainerCell .sk-obj-placeholder-wrapper {
   position: relative;
   z-index: -1;
   width: 100%;
   height: 0;
   padding: 150px 0;
   margin: -150px 0;
   cursor: pointer;
   opacity: 1;
}

.sgHC0 .plain > div {
   display: table;
   width: 100%;
   table-layout: fixed;
}

.sgVCC0 .sg .secIconColCell {
   display: none;
}

.sgHT0 .tabButtonContainerCell.sg-equal-tabs {
   table-layout: fixed;
   width: 100%
}

.sgHT0 .tabButtonContainerCell {
   position: relative;
}

.sgHT0 .tabButtonContainerCell .sk-obj-placeholder-wrapper {
   height: 100%;
}

.sgVC0 .sectionCell .secCptn,
.sgVCC0 .sectionCell .secCptn {
   display: table;
   width: 100%;
   table-layout: fixed;
}

.sgVC0 .sectionCell .secCptn > span,
.sgVCC0 .sectionCell .secCptn > span {
   display: table-cell;
}

#sg-moved-contents {
   position : absolute;
   top : 0;
   left : -1000px;
}

.sg.sgHC0 .sk-obj-placeholder-wrapper {
   height: 100%;
}

/* In tabs, the delimiter is not used and can't be modified from style editor, therefore hide it to prevent unexpected results */
.sgHT0 .sg-delim-common,
.sgVT0 .sg-delim-common {
   display: none;
}

/*--- INITIAL RENDER -----------------------------------------------------------*/

/* hide body content for tabs, until they are loaded */
.sgHT0.sk-sg-initial-render,
.sgVT0.sk-sg-initial-render {
   visibility: hidden;
   opacity: 0;
}

/*
   When switch to tabs type, hide body content if they are in the main container.
   When the body is moved to the apropierd container for tabs, it will be visible
*/
.tabButtonContainerCell .secBody {
   display: none;
}

.sgHT0 .sk-tabs-holder-wrapper {
   display: flex;
   align-items: center;
}

.sk-tabs-arrow {
   width: 40px;
   text-align: center;
   cursor: pointer;
}

.sk-tabs-arrow:before {
   font-size: 1.5em;
   font-weight: bold;
   user-select: none;
   -webkit-touch-callout: none;    /* iOS Safari */
}

.sk-tabs-arrow.sk-tabs-arrow-prev:before {
   content: '<';
}

.sk-tabs-arrow.sk-tabs-arrow-next:before {
   content: '>';
}

.sk-tabs-holder {
   width: 100%;
   overflow: hidden;
}

.sk-sg-grid-container {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}