/* Copyright © 2023. Verizon Connect Ireland Limited. All rights reserved. */

:root {
    --black-1: #002B42;
    --blue-1: #4078F2;
    --blue-2: #0077B4;
    --brown-1: #794938;
    --green-1: #008330; 
    --grey-1: rgb(191, 191, 191);
    --grey-2: rgb(242, 242, 242);
    --grey-3: #F9F9F9;
    --grey-4: #f2f2f2;
    --grey-5: #f6f6f6;
}

.container {
    font-family:"Arial",sans-serif;
    font-size:15px;
}

.table-container {
    overflow-x:auto;
}

h1 {
	margin-top:10px;
	margin-bottom:10px;
	font-family: 'Arial';
    font-weight: 700;
    font-size:40px;
    line-height: 48px;
    margin-bottom: 24px;
}

h2 {
	margin-top:18px;
	margin-bottom:10px;
	line-height:123%;
    font-family:'Arial';
    font-style: normal;
    font-weight: 700;
    font-size: 24px;
    line-height: 32px; 
    margin-bottom: 16px;
}

h3 {
	margin-top:18px;
	margin-bottom:10px;
	line-height:123%;
    font-family:'Arial';
    font-style: normal;
    font-weight: 700;
    font-size: 20px;
    line-height: 32px; 
    margin-bottom: 16px;
}

p {
	margin: 5px 5px 5px 0;
}

p.margin-extra-small{
    margin-bottom: 12px;
}

p.margin-small{
    margin-bottom: 16px;
}

p.margin-medium{
    margin-bottom: 24px;
}

p.margin-large{
    margin-bottom: 32px;
}

p.margin-extra-large{
    margin-bottom: 48px;
}

a{
    color: var(--blue-2);
}

/* Flex GRID implementation START */

* {
    box-sizing: border-box;
}

.grid-container {
    /* Setting fixed width until we can figure out the parent iFrame issue */
    width: 800px; 
    border: solid var(--grey-1);
	border-width: 1px 0 0 0;
    margin-top: 15px;
}

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.flex-item-left {
    flex: 15%;
    border: solid var(--grey-1);
    border-width: 0 1px 1px 1px;
    padding: 12px;
	vertical-align: top;
    font-size:14px;
	color:black;
    font-weight: bold;
}

.flex-item-right {
    flex: 85%;
    border: solid var(--grey-1);
    border-width: 0 1px 1px 0;

    background-color: var(--grey-2); 
    padding: 12px;
	vertical-align: top;
    font-size:14px;
	color:black;
}

.wide-flex-row {
    display: flex;
    flex-wrap: wrap;
}

.wide-flex-row__header {
    background-color: var(--grey-5);
    font-weight: 700;
}

.wide-flex-item-left {
    flex: 20%;
    border: solid var(--grey-1);
    border-width: 0 0 1px 1px;
    padding: 12px;
	vertical-align: top;
    font-size:14px;
	color:black;
    /* Setting overflow to hidden due to the parent iFrame issue */
    overflow: hidden;
}

.wide-flex-item-mid {
    flex: 20%;
    border: solid var(--grey-1);
    border-width: 0 1px 1px 1px;
    padding: 12px;
	vertical-align: top;
    font-size:14px;
	color:black;
    /* Setting overflow to hidden due to the parent iFrame issue */
    overflow: hidden;
}

.wide-flex-item-right {
    flex: 60%;
    border: solid var(--grey-1);
    border-width: 0 1px 1px 0;
    padding: 12px;
	vertical-align: top;
    font-size:14px;
	color:black;
    /* Setting overflow to hidden due to the parent iFrame issue */
    overflow: hidden;
}

.wide-flex-item-mobile-header {
    display: none;
}

hr.wide-flex-mobile__hr {
    display: none;
}

@media (max-width: 375px) {

    .grid-container {
        flex-direction: column;
    }
    
    .wide-flex-item-mobile-header { 
        font-weight: bold;
        display: block;
        padding: 12px 0 0 12px;
    }

    .flex-item-right, .flex-item-left {
        flex: 100%;
    }

    .wide-flex-item-left, .wide-flex-item-mid, .wide-flex-item-right {
        flex: 100%;
        border: none;
    }

    .wide-flex-row {
        border: solid var(--grey-1);
        border-width: 0 1px 0 1px;
    }

    .wide-flex-row--first {
        border: solid var(--grey-1);
        border-width: 0 1px 1px 1px;
    }

    .wide-flex-row--last {
        border: solid var(--grey-1);
        border-width: 0 1px 1px 1px;
    }

    .wide-flex-item--desktop {
        visibility: hidden;
    }

    .wide-flex-item--desktop-none {
        display: none;
    }

    hr.wide-flex-mobile__hr {
        display: block;
        border-top: 1px solid var(--grey-1);
        width: 100%;
        margin: 0 12px 0 12px;
    }
}
    
/* Flex GRID implementation END */

/* CODE BLOCK START */

.code-block__container {
    color: var(--black-1);
    background-color: var(--grey-4);
    padding: 14px;
    margin-top: 15px;
}

.code-block__default,
.code-block__tabbed1,
.code-block__tabbed2,
.code-block__tabbed3 {
    overflow: hidden;
    overflow-wrap: break-word;
}

.code-block--blue {
    color: var(--blue-1)
}

.code-block--brown {
    color: var(--brown-1)
}

.code-block__tabbed1 {
    margin-left: 2%;
}

.code-block__tabbed2 {
    margin-left: 4%;
}

.code-block__tabbed3 {
    margin-left: 6%;
}

.code-block__tabbed4 {
    margin-left: 8%;
}

.code-margin-small{
    margin-bottom: 16px;
}

.code-margin-medium{
    margin-bottom: 24px;
}

.code-margin-large{
    margin-bottom: 32px;
}

.code-highlight{
    color: var(--blue-2);
}

.code-comment{
    color: var(--green-1);
}


.code-margin-extra-large{
    margin-bottom: 48px;
}

/* CODE BLOCK END */

.page-content-header{
    font-family:'Arial';
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
}

.page-content-list{
    margin-bottom: 32px;
    text-decoration-line: underline;
    color: var(--blue-2);
}

.page-content-item{
    margin-bottom: 8px;
}

.page-section{
    margin-bottom: 48px;
}

.button-header{
    font-style: normal;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
}

.button-container {
    margin-top: 64px;
    position: relative; 
    bottom: 0; 
    width: 95%;
}