/* Elements page styles.

   developer:   yhechler
   requires:    /enterprise-private-cloud/css/epc-shared.css.es
   ========================================================================== */
/* heading
   ========================================================================== */

#heading .width {
    padding: 3.1254rem 0 0 0;
}
   
/* ==========================================================================
shared style
   ========================================================================== */ 

.section-wrapper .table {
    display: table;
}

.section-wrapper .row-container {
	margin-bottom: 2.375rem;
	padding-bottom: 0.875rem;
}

.section-wrapper .row-container.last {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.section-wrapper .spacer {
    height: 3.125rem;
}

.section-wrapper h3 {
    color: #535353;
    font-size: 2.1875rem;
    line-height: 1.3;
    font-weight: 300;
    margin-bottom: 1.875rem;
}

.section-wrapper.note {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 2;
}

.section-wrapper h3.first {
    border-top: none;
}

.section-wrapper h4 {
    margin: 0 0 5px;
    color: #ff7700;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
}

.section-wrapper img {
    display: block;
    margin: 0 0 0.9375rem 0;
}

.section-wrapper p {
    margin: 6px 0 30px 0;
    color: #636363;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
}

.section-wrapper p.last {
    margin: 6px 0 0 0;
}

.section-wrapper span.note {
    display: block;
    color: #8e8e8e;
    font-size: 0.75rem;
    line-height: 3;
}

.section-wrapper .img.left {
    width: 76px;
    padding: 5px 12px 0 0;  /* dont change the 12px */
    display: inline-block;
    vertical-align: top;
}

.column.left.options {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.8125rem;
}

.component,
.column.left.options > * {
    display: flex;
}

.column.left.options > * {
    flex: 1 1 45% !important;
}

.section-wrapper .text.right {
    max-width: 23.3125rem;
    padding: 0 0 0 0;
    display: inline-block;
}

#elements .column {
    flex: 1 1 30.3125rem;
}

#elements .section-wrapper:not(:last-of-type) .row-container {
    border-bottom: 1px solid #b3b3b3;
}


/* New Pod */
.new {
    background: #ffffff;
    background: linear-gradient(to bottom,  #ffffff 45%,#f2f2f2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 );
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    margin: 0 0 1.875rem -1rem;
    padding: .6rem 1rem .8rem 1rem;
    display: flex;
}
.new p {
    margin: 6px 0 0 0;
}
.new .text.right {
    max-width: 24.0625rem;
}


/* get help
   ========================================================================== */

#help {
    border: none;
}


/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

   @media all and (max-width: 1200px) {}

   /* styles for medium screens (900px)
      ========================================================================== */
   
   @media all and (max-width: 900px) {}
   
   /* styles for medium screens (600px)
      ========================================================================== */
   
   @media all and (max-width: 600px) {
        .column.left.options > * {
            flex: 1 1 100% !important;
        }
        .section-wrapper .text.right {
            max-width: 100% !important;
        }
        .column.left.options img {
            width: 48px;
            height: auto;
        }
        .section-wrapper p.last {
            margin: 6px 0 30px 0;
        }
        .section-wrapper .img.left {
            width: 60px;
        }

   }
   
   /* styles for medium screens (320px)
      ========================================================================== */
   
   @media all and (max-width: 320px) {}