/* Compare page styles.

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

#heading h2 {
	margin-bottom: 0.625rem;
}

/* ==========================================================================
   shared style
   ========================================================================== */ 
.section-wrapper .table { 
    margin-top: 1.0625rem; 
    width:58.5rem;
    max-width: 100%;
}
#compare .section-wrapper .column,
#compare .section-wrapper .column.first.gray {
    max-width: 14.625rem;
}
.section-wrapper .column {
    border-right: 1px solid #cccccc;
}
.section-wrapper .column.right { padding: 0; }

.section-wrapper .column.first.gray {
    background-color: #f2f2f2;
    color: #535353;
    padding-left: 1.25rem;
    vertical-align: middle;
    font-weight: 600;
    border-left: 1px solid #b3b3b3;
    border-bottom: none;
    padding: 0 5px 0 1.25rem;
}

.section-wrapper .column.second span,
.section-wrapper .column.third span,
.section-wrapper .column.fourth span {
    text-align: center;
    display: block;
    vertical-align: middle;
    padding: 0.625rem;
}

.section-wrapper .spacer { height: 50px;}

.section-wrapper h3 {
    color: #535353;
    font-size: 1.3125rem;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 0;

}

.section-wrapper h3.first { 
    border-top: none;   
    width: 60rem;
    max-width: 100%;
}
.section-wrapper h4 {
    margin: 0rem 0 0.3125rem;
    color: #ff7700;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.33;
 
}
.section-wrapper h4.first {
    border-top: none;
}
.section-wrapper span.note-list {
    display: inline-block;
    margin-top: 0.625rem;
}

.section-wrapper.note {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 2;
}
.section-wrapper .row-container.header {
    margin-bottom: 0rem;
    padding-bottom: 0rem;
}
#compare .section-wrapper .row-container {
    border-bottom: 1px solid #b3b3b3;
    display: flex;
}
#compare .section-wrapper .row-container > * {
    flex: 1 1 25%;
}
.section-wrapper .width {
    padding: 0rem 5rem 0rem 0;
    width: 100%;
    max-width: 63.4375rem;
    margin: 0 auto;
}
.section-wrapper .width.header {
/*    padding: 3.125rem 5rem 1.5625rem 0;*/
}
.section-wrapper .row-container.header span {
    color: white;
}

.legend .section-wrapper span {
    color: #535353 !important;
    font-size: 0.875rem;
}

.legend span.red {
    color: #535353 !important;
}

.section-wrapper .column.red {
    background-color: #dd1100;
    color: white;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    border-right: 1px solid white;
    vertical-align: middle;
    line-height: 1.5;
    border-bottom: 1px solid white;
}

.section-wrapper .column.red.last,
.section-wrapper .row-container.header .column.first  { 
  border-right: none !important;
}

.column, .local-wrapper .column { vertical-align: middle; }

.section-wrapper img {
    display: block;
    margin: 0.5rem auto 0.5rem auto;
}

.section-wrapper .column.third span.inline-text, 
.section-wrapper .column.fourth span.inline-text {
    padding: 3px;
    vertical-align: middle;
}

.section-wrapper span.line-height-20 { line-height: 1.25rem; }

.section-wrapper img.with-inline-text {
    vertical-align: bottom;
    margin-bottom: 0rem;
}

.section-wrapper .column.third span.text-align-left,
.section-wrapper .column.second span.text-align-left {
    text-align: left;
    padding-left: 0.9375rem;
}

div.legend {
    text-align: right;
    display: flex;
    justify-content: flex-end;
}

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

#help {
    border: none;
}

/* Tabs
   ========================================================================== */

#compare .tabs .column.tab.active {
    background-color: #dd1100 !important;
    border-bottom: 1px solid #dd1100;
    position: relative;
}

#compare .tabs .column.tab,
#compare .tabs .column.tab.active {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.875rem;
    font-weight: 600;
    border-right: 1px solid white;
    vertical-align: middle;
    line-height: 1.5;
    cursor: pointer;
}

#compare .tab.active span {
    color: white !important;
}

#compare .tabs .column.tab.active:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
    border-width: 10px 10px 0px 10px;
    border-color: #dd1100 transparent transparent transparent;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
}

#compare .tabs .column.tab {
    background-color: #e8e8e8;
    border-bottom: 1px solid #b3b3b3;
    text-align: center;
    display: block;
    vertical-align: middle;
    padding: 0.625rem;
}

#compare .tab span {
    color: #b3b3b3;
}

.no-display {
    display: none !important;
/*    border: none !important;*/
}

.display {
    display: table-cell !important;
/*    border-right: 1px solid #cccccc !important;*/
}

.row-container.header.tabs {
    border-bottom: none !important;
}

/*.row-container.header {
    border-right: none !important;
}
*/

/* ==========================================================================
   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) {
        .section-wrapper .width {
            padding: 0rem 1rem 0rem 0;
        }
        .section-wrapper .width.header {
            padding: 3.125rem 0rem 1.5625rem 0;
        }
        .section-wrapper .table { 
            width:100% !important;
            max-width: 58.5rem;
        }
   }
   
   /* styles for medium screens (600px)
      ========================================================================== */
   
   @media all and (max-width: 600px) {
        .column.third, .column.fourth {
            display: none;
        }
        .column.second.red, .column.third.red, .column.fourth.red { display: none; }
        
        #compare .section-wrapper .column, #compare .section-wrapper .column.first.gray {
             max-width: 100%; 
        }
        .section-wrapper .width {
            padding: 0rem;
        }
        #compare .tabs .column.tab {
            padding: 0.625rem 0.225rem;
        }
        #contact-us-section .column.right {
            margin-right: 6% !important;
        }
   }
   
   /* styles for medium screens (320px)
      ========================================================================== */
   
   @media all and (max-width: 320px) {}