/* Faqs page styles.

    developer:   yhechler, tajudeen
    requires:    /enterprise-private-cloud/css/epc-shared.css.ko
   ========================================================================== */
   
/* heading
   ========================================================================== */
#heading h2 {
	margin-bottom: 0.625rem;
}
#heading h2 img {
    margin: 0rem 0 0rem 8.125rem;
    display: inline;
    vertical-align: bottom;
}   
/* ==========================================================================
     shared style
   ========================================================================== */ 

section-wrapper .table {
    display: table;
}

.section-wrapper .row-container {
    display: block;
    border-bottom: 1px solid #b3b3b3;
}

.section-wrapper .row-container.first {
    display: block;
    border-top: 1px solid #b3b3b3;
    padding-top: 2.5rem;
    margin-top: 1.25rem;
}

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

.section-wrapper .column.right { padding: 0; }

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

.section-wrapper h3 {
    color: #dd1100;
    font-size: 1.125rem;
    line-height: 1.44;
    font-weight: 600;
    padding-top: 1.875rem;
    margin-bottom: 0;
    max-width:51.875rem;
}

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

.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;
    width: 48%;
}

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


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

.section-wrapper p {
    margin: 0rem 0 0rem 0;
    padding-top: 0;
    padding-bottom:0;
    color: #636363;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    max-width: 51.875rem;
}

.section-wrapper p span { color: #c10000; }

.section-wrapper ul { margin-top: 1rem; }

.section-wrapper .text.left {
    width: 56%;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

.section-wrapper .img.right {
    width: 26%;
    padding: 0;
    display: inline-block;
}

.column.left {
    max-width: 42%;
    padding: 0 3rem 0 0;
}

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

.section-wrapper .column.red.last { border-right: none; }

.section-wrapper .table .row-container.header .column.first { border-right: none; }

.section-wrapper .table .row-container.header {
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 2.5rem;
    border-left: 1px solid #ffffff;
    border-right: 1px solid #dd1100;
    color: #ff7700;
    font-size: 0.875rem;
    border-bottom: none;
}

.section-wrapper .table .row-container {
    display: table;
    border-bottom: 1px solid #b3b3b3;
    border-left: 1px solid #b3b3b3;
    border-right: 1px solid #b3b3b3;
    box-sizing: border-box;
}

.section-wrapper .table .row-container.second { border-top: 1px solid #b3b3b3; }

.section-wrapper .table .column {
    width: 275px;
    text-align: left;
    padding: 0.3125rem 0rem 0.3125rem 0.625rem;
}

.section-wrapper .table .column span {
    display: block;
    vertical-align: middle;
}

.section-wrapper .table .row-container.header .column.first { background-color: #ffffff; }

.section-wrapper .table .row-container.fourth .column { height: 4.375rem; }

.section-wrapper .table .column.second,
.section-wrapper .table .column.third {
    border-left: 1px solid #b3b3b3;
}

.section-wrapper .table .row-container.header .column.second, 
.section-wrapper .table .row-container.header .column.third {
    background-color: #dd1100;
    color: white !important;
}

.section-wrapper .table .column.first {
    background-color: #f2f2f2;
    color: #535353;
    padding-left: 1.25rem;
    vertical-align: middle;
    font-weight: 600;
    border-bottom: none;
}

.section-wrapper .table .row-container.header span {
    font-size: 1rem;
    font-weight: 600;
    vertical-align: top;
    line-height: 1.3125;
}

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

#help { border: none; }


/* contact us section overwrite
   ========================================================================== */
#contact-us-section { margin-top: 5.375rem; }


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

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

#faq .tabs .column.tab,
#faq .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;
}

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

#faq .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%);
}

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

#faq .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;
}

#faq .section-wrapper .row-container {
    border-bottom: 1px solid #b3b3b3;
    display: flex;
    flex-wrap: wrap;
}

#faq .row-container {
    
}

#faq .section-wrapper .row-container > * {
    flex: 1 1 25%;
}




/* ==========================================================================
   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) {
        .section-wrapper .table .row-container.header {
            border-left: none;
            border-right: none;
        }
        #faq .section-wrapper .column, #faq .section-wrapper .column.first.gray {
            max-width: 100%;
        }
        .column.third {
            display: none;
        }
        .column.second.red, .column.third.red { display: none; }

        .section-wrapper .width {
            padding: 0rem;
        }
        #faq .tabs .column.tab {
            padding: 0.625rem 0.225rem;
        }
   }
   
   /* styles for medium screens (320px)
      ========================================================================== */
   
   @media all and (max-width: 320px) {}