/******************************************************************************
* global
* 
***/

.ab-wrapper {
    box-sizing: border-box;
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 56px 72px;
    vertical-align: top;
}

.ab-wrapper > *:first-child:not([name]),
.ab-wrapper > *:first-child[name] + * {
    margin-top: 0;
}

.ab-wrapper {
    position: relative;
    z-index: 1;
}

html[dir='rtl'] div.ab-notifications,
html[dir='rtl'] div.ab-content {
    direction: rtl;
}

.goa-icon {
    font: 24px 'Material Icons';
    vertical-align: text-bottom;
}
.goa-icon.apps:before {
    content: 'apps';
}
.goa-icon.open-new:before {
    content: 'open_in_new';
}
.goa-icon.add:before {
    content: 'add';
}
.goa-icon.remove:before {
    content: 'remove';
}
.extranet {
    background: #35444b;
    color: white;
    padding: 4px;
}

/* global overrides **********************************************************/

h3 {
    margin-top: 30px;
}
p,
ol {
    margin-top: 28px;
}
ol {
    list-style: decimal;
}
ol li {
    list-style-position: inside;
    margin: 12px 0 0;
}
ol,
ul {
    margin-left: 1em;
}
ol.no-margin {
    margin-left: 0;
}
li > ul {
    list-style-type: circle;
    margin-top: 0;
}
strong {
    font-weight: bold;
}
em {
    font-style: italic;
}

/******************************************************************************
* header
* 
***/

header {
    box-sizing: border-box;
    display: block;
    width: 100%;
}

div.ab-header > .ab-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 64px;
    padding: 0 72px;
}

div.ab-header > .ab-wrapper > div + div {
    margin-left: 38px;
}

/* ab-logo *******************************************************************/

div.ab-header div.ab-logo {
    display: flex;
    flex-basis: 101px;
    flex-shrink: 0;
    flex-grow: 0;
    height: 30px;
}

div.ab-header div.ab-logo > a {
    outline: none;
}

/* toc */
.ab-toc .goa-title {
    font-size: 24px;
}

/* breadcrumb ****************************************************************/
div.ab-breadcrumb {
    background: #f1f1f1;
    display: block;
}
div.ab-breadcrumb ul {
    align-items: center;
    box-sizing: border-box;
    display: flex;
    height: 46px;
    justify-content: flex-start;
    margin: 0 auto;
    padding: 0 72px;
}
div.ab-breadcrumb ul li {
    color: #48555e;
    display: inline-block;
    font-size: 14px;
    list-style-type: none;
    margin: 0;
}
div.ab-breadcrumb ul li:not(:first-child)::before {
    content: '\00a0\2192\00a0';
}
div.ab-breadcrumb ul li * {
    color: #48555e;
}

/* hero banner ***************************************************************/

div.goa-hero {
    align-items: center;
    background: #0081a2;
    border-bottom-color: #c8eefa;
    display: flex;
    height: 212px;
}
div.goa-hero > div.goa-wrapper {
    padding-bottom: 0;
    padding-top: 0;
}
div.goa-hero h1 {
    font-size: 48px;
    font-weight: bold;
    line-height: 1.1;
}
div.goa-hero p {
    margin-top: 16px;
}

/* cards **********************************************************************/

div.goa-card ul {
    padding-top: 32px;
}
div.goa-card li {
    border: 0;
    margin-top: 0;
}
div.goa-card div.goa-text {
    padding-top: 12px;
}

/* card-icon */

div.goa-card-icon {
    align-items: center;
    display: flex;
    height: 48px;
    justify-content: center;
    padding-top: 24px;
    position: absolute;
    width: 48px;
}
div.goa-card-icon i {
    font-size: 40px;
}
div.goa-card-icon + div.goa-title,
div.goa-card-icon + div.goa-title + div.goa-text {
    padding-left: 64px;
}

/* no-gutter */

div.goa-card ul.no-gutter {
    margin: 0 -14px;
    padding-top: 32px;
}
div.goa-card ul.no-gutter li .goa-title,
div.goa-card ul.no-gutter li .goa-text {
    padding-left: 14px;
    padding-right: 14px;
}

/* link style override */

div.goa-card a:hover {
    color: #004f84;
    text-decoration: underline;
}
div.goa-card a:focus {
    outline: 1px solid #004f84;
}

/* main **********************************************************************/

main article section {
    margin: 0 auto;
    padding-top: 32px;
}

main article section h3 {
    margin-top: 56px;
}

p.back {
    margin-top: 56px;
}

/* h-card microformat */

.h-card {
    padding: 28px 0;
}
.h-card p {
    margin-top: 12px;
}
.h-card .p-job-title {
    color: #666;
    font-size: 14px;
    line-height: 17px;
    margin-top: 6px;
}
.h-card .u-email,
.h-card .p-tel {
    align-items: flex-end;
    color: black;
    display: flex;
    margin-right: 10px;
}
.h-card .u-email::before {
    content: 'mail_outline';
    display: inline-block;
    font: 24px 'Material Icons';
    margin-right: 10px;
}
.h-card .p-tel::before {
    content: 'phone';
    display: inline-block;
    font: 24px 'Material Icons';
    margin-right: 10px;
}

/* buttons */
/* copied from material */
button {
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    border-radius: 4px;
    border: none;
    box-sizing: border-box;
    color: inherit;
    cursor: pointer;
    display: inline-block;
    font: bold 18px/36px acumin-pro-semi-condensed, sans-serif;
    margin: 0;
    min-width: 64px;
    outline: 0;
    overflow: visible;
    padding: 0 16px;
    position: relative;
    text-align: center;
    text-decoration: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    vertical-align: baseline;
    white-space: nowrap;
}

button:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
button:focus {
    background-color: rgba(0, 0, 0, 0.12);
}

button[type='submit'] {
    color: #0070c4;
}

/******************************************************************************
* footer
* 
***/

footer {
    min-height: 84px;
}

div.ab-pages > .ab-wrapper:after,
div.ab-toc > .ab-wrapper:after {
    position: absolute;
    left: 72px;
    right: 72px;
    bottom: -1px;
    border-bottom: 1px solid #dcdcdc;
    content: '';
}

div.ab-toc > .ab-wrapper > ul {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style-type: none;
    vertical-align: top;
}

div.ab-toc > .ab-wrapper > ul > li {
    box-sizing: border-box;
    display: inline-block;
    margin: 23px 24px 0 0;
    padding: 0;
    vertical-align: top;
}

/* ab-themes *****************************************************************/

div.ab-themes h2 {
    margin: 0;
}

div.ab-content .ab-wrapper {
    padding-bottom: 56px;
}

/* ab-notifications **********************************************************/

div.ab-notifications a:before {
    position: absolute;
    top: 50%;
    left: 0px;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center center;
    content: '';
}

div.ab-notifications li.ab-info a:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23fff' d='M15.16,15.5h-2V9a1,1,0,0,0-1-1H9.82a1,1,0,0,0,0,2h1.36V15.5h-2a1,1,0,1,0,0,2h6a1,1,0,0,0,0-2Z'/%3E%3Cpath fill='%23fff' d='M12,7.33A1.29,1.29,0,1,0,10.73,6,1.29,1.29,0,0,0,12,7.33Z'/%3E%3C/svg%3E");
}

div.ab-notifications li.ab-emergency a:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M11,9.41v4.52a1,1,0,0,0,2,0V9.41a1,1,0,0,0-2,0Z'/%3E%3Cpath fill='%23fff' d='M12,16.15a1.29,1.29,0,1,0,1.29,1.29A1.29,1.29,0,0,0,12,16.15Z'/%3E%3Cpath fill='%23fff' d='M22.87,20.14l-10-17.32a1,1,0,0,0-1.74,0l-10,17.32a1,1,0,0,0,0,1,1,1,0,0,0,.87.5H22a1,1,0,0,0,.87-.5A1,1,0,0,0,22.87,20.14Zm-19.14-.5L12,5.32l8.27,14.32Z'/%3E%3C/svg%3E");
}

div.ab-notifications li.ab-important a:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z'/%3E%3Cpath fill='%23000' d='M12,14.46a1,1,0,0,0,1-1V6.57a1,1,0,0,0-2,0v6.89A1,1,0,0,0,12,14.46Z'/%3E%3Cpath fill='%23000' d='M12,15.68A1.29,1.29,0,1,0,13.29,17,1.29,1.29,0,0,0,12,15.68Z'/%3E%3C/svg%3E");
}

div.ab-notifications li.ab-event a:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M3.27,22.85H20.73a2.14,2.14,0,0,0,2.14-2.14V5A2.14,2.14,0,0,0,20.73,2.9h-2.1v2h2.1a.14.14,0,0,1,.14.14V8.31H3.13V5a.14.14,0,0,1,.14-.14H5.48V6.28a1,1,0,1,0,2,0V1.85a1,1,0,1,0-2,0v1H3.27A2.14,2.14,0,0,0,1.13,5V20.71A2.14,2.14,0,0,0,3.27,22.85Zm17.6-12.54v10.4a.14.14,0,0,1-.14.14H3.27a.14.14,0,0,1-.14-.14V10.31Z'/%3E%3Cpath fill='%23fff' d='M16.45,7.28a1,1,0,0,0,1-1V1.85a1,1,0,0,0-2,0v1h-1.8v2h1.8V6.28A1,1,0,0,0,16.45,7.28Z'/%3E%3Cpath fill='%23fff' d='M11.47,7.28a1,1,0,0,0,1-1V1.85a1,1,0,1,0-2,0v1H8.66v2h1.81V6.28A1,1,0,0,0,11.47,7.28Z'/%3E%3Crect fill='%23fff' x='6.67' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='11.22' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='15.77' y='11.52' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='3.64' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='8.19' y='15.83' width='2.33' height='2.33'/%3E%3Crect fill='%23fff' x='12.74' y='15.83' width='2.33' height='2.33'/%3E%3C/svg%3E");
}

/* accordion ****************************************************************/
.goa-accordion .goa-toolbar {
    display: flex;
    justify-content: space-between;
}
.goa-accordion .goa-toolbar button.goa-button {
    align-items: center;
    display: inline-flex;
    justify-content: space-between;
    margin-right: 0;
    width: 49%;
}
.goa-accordion > ul {
    list-style: none;
    margin-left: 0;
}
.goa-accordion > ul > li {
    margin: 1px 0;
}
.goa-accordion > ul > li button {
    align-items: center;
    background: #f1f1f1;
    border-radius: 0;
    color: #0070c4;
    display: inline-flex;
    height: 52px;
    justify-content: space-between;
    width: 100%;
}
.goa-accordion > ul > li:first-of-type button {
    border-radius: 4px 4px 0 0;
}
.goa-accordion > ul > li:last-of-type button {
    border-radius: 0 0 4px 4px;
}
.goa-accordion > ul > li button:hover {
    background: #c1c1c1;
}
.goa-accordion > ul > li button > i {
    color: #000;
}
.goa-accordion > ul > li .goa-text {
    margin: 24px 28px;
}
.goa-accordion > ul > li .goa-text img {
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.75);
    max-width: 100%;
}
.goa-accordion > ul > li .goa-text ol li,
.goa-accordion > ul > li .goa-text ul li {
    margin-top: 12px;
    margin-bottom: 12px;
}
.goa-accordion .collapsed {
    display: none;
}

/******************************************************************************
* breakpoint variant: mobile
* 
***/

@media screen and (max-width: 500px) {
    /* offset for fixed headers ***/

    h2:before {
        display: block;
        height: 90px;
        margin-top: -90px;
        visibility: hidden;
        content: '';
    }

    div.ab-toc .ab-wrapper {
        width: 100%;
    }

    /**************************************************************************
  * header
  * 
  ***/

    /* ab-header ***/

    div.ab-header {
        border-bottom: 1px solid #f1f1f1;
    }

    div.ab-header > .ab-wrapper {
        padding: 0 24px;
        height: 66px;
    }

    /* ab-languages **********************************************************/

    div.ab-languages {
        text-align: left;
    }

    /**************************************************************************
  * main
  * 
  ***/

    .ab-wrapper,
    div.ab-breadcrumb ul {
        padding-left: 24px;
        padding-right: 24px;
    }

    div.ab-mask {
        top: 66px;
    }

    ul.ab-menugrid > li {
        flex-basis: 100%;
    }

    /* ab-toc ***/

    div.ab-pages > .ab-wrapper:after,
    div.ab-toc > .ab-wrapper:after {
        left: 24px;
        right: 24px;
    }
}

/******************************************************************************
* breakpoint to fix hero banner from mobile to 768
***/
@media screen and (max-width: 768px) {
    div.goa-hero h1,
    div.goa-hero p {
        width: 100%;
    }
}

/******************************************************************************
* breakpoint to fix weird scrollbar at 768
***/
@media screen and (min-width: 768px) and (max-width: 1220px) {
    div.goa-card ul {
        width: 95%;
    }
}

/******************************************************************************
* breakpoint variant: tablet
* 
***/

@media screen and (min-width: 500px) and (max-width: 1220px) {
    h2:before {
        display: block;
        height: 90px;
        margin-top: -90px;
        visibility: hidden;
        content: '';
    }

    /**************************************************************************
	* header
	* 
	***/

    div.ab-header {
        border-bottom: 1px solid #f1f1f1;
    }

    div.ab-header > .ab-wrapper {
        height: 66px;
    }

    div.ab-mask {
        top: 66px;
    }

    /* main */

    main article section {
        max-width: 748px;
    }
}

/******************************************************************************
* breakpoint variant: desktop
* 
***/

@media screen and (min-width: 1220px) {
    .ab-wrapper,
    div.ab-breadcrumb ul {
        width: 1200px;
    }

    main article section {
        width: 748px;
    }
}