/* Fill as needed */

/* Note: typography for "ordinary text" (default) is set in cssreset.css */


/* Headings */
h1, h2, h3, .h1, .h2, .h3, h4, .h4 {
    font-family: 'HelveticaNeueW01-55Roma', Helvetica, Arial, sans-serif;
    font-weight: normal;
    color: #4e4e4e;    
    margin-top: 36px;
    margin-bottom: 8px;
    display: block;
}

h1, .h1 {
    font-size: 30px;
    line-height: 37px;
}
h1.blue {
    color: #006ebf;
}
h2, .h2 {
    font-size: 25px;
    line-height: 32px;
}
h3, .h3 {
    font-size: 19px;
    line-height: 27px;
}

/* BIGGER FONT FOR EDITOR */
    .font-xl {
        font-size: 2em;
        line-height: 1;
    }
/* Paragraphs */
p {
}
p:first-child {
    margin-top: 0;
}

/* ONLY FOR SCREEN READERS */
.sr-only{
 position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
 }

/* strong */
strong{
    font-weight:400;
    font-family:HelveticaNeueW01-85Heav, Arial, Helvetica, sans-serif;
}

/* Links */
/*a {
    text-decoration: none;
}*/

/*a:hover {
    text-decoration: underline;
}*/

/* links are only meant to be underlined and have a :visited color in textareas. This is the best way I can think of right now //Per */ 
.footerContentWrapper a,
.textContent a,
.mceContentBody a /* Mce-editor style */
{
    color: #004C85;
}
.mainbody a, p > a {
    color: #004C85;
    text-decoration: underline !important;
    &:hover {
        text-decoration: none !important;
    }
}
.mainBody a:visited {
    color: #004C85;
}
.footerContentWrapper a:visited,
.textContent a:visited,
.mceContentBody a:visited /* Mce-editor style */
{
    color: #004C85;    
}
.mainBody a:active, 
.footerContentWrapper a:active,
.textContent a:active,
.mceContentBody a:active /* Mce-editor style */
{
    text-decoration: underline;
}
.mainBody a[href^="http://"]:not([href*="norrtalje.se"]),
.mainBody a[href^="https://"]:not([href*="norrtalje.se"]), 
.textContent a[href^="http://"]:not([href*="norrtalje.se"]),
.textContent a[href^="https://"]:not([href*="norrtalje.se"]), 
.mceContentBody a[href^="http://"]:not([href*="norrtalje.se"]), /* Mce-editor style */
.mceContentBody a[href^="https://"]:not([href*="norrtalje.se"]) /* Mce-editor style */
{
    padding:0 15px 0 0; 
    background:transparent url(/static/images/icons/Icon_External_Link.png) no-repeat center right;
}

#EServicePage .mainBody a[href^="http://"]:not([href*="norrtalje.se"]),
#EServicePage .mainBody a[href^="https://"]:not([href*="norrtalje.se"]), 
#EServicePage .textContent a[href^="http://"]:not([href*="norrtalje.se"]),
#EServicePage .textContent a[href^="https://"]:not([href*="norrtalje.se"]), 
#EServicePage .mceContentBody a[href^="http://"]:not([href*="norrtalje.se"]), /* Mce-editor style */
#EServicePage .mceContentBody a[href^="https://"]:not([href*="norrtalje.se"]) /* Mce-editor style */
{
    background: none;
}



.bodyContent .mainBody a[href$='.pdf'], /* Use .bodyContent to boost specificity relative to external links icon */
.bodyContent .mainBody a[href$='.PDF'], /* Use .bodyContent to boost specificity relative to external links icon */
.bodyContent .textContent a[href$='.pdf'], /* Use .bodyContent to boost specificity relative to external links icon */
.bodyContent .textContent a[href$='.PDF'], /* Use .bodyContent to boost specificity relative to external links icon */
#tinymce a[href$='.pdf'], /* Mce-editor style */
#tinymce a[href$='.PDF'] /* Mce-editor style */
{ 
    padding:0 19px 0 0; 
    background:transparent url(/static/images/icons/pdficon_small.png) no-repeat center right;
}

/* Lists */
.blue-box ul:not(.contactTypeList), .blue-box ol,
.mainBody ul, .mainBody ol, 
.textContent ul, .textContent ol, 
.mceContentBody ul, .mceContentBody ol {
    margin-left: 30px;
}
.blue-box ul,
.mainBody ul, 
.textContent ul, 
.mceContentBody ul {
    list-style-type: none;
    margin-top: 20px;
    margin-bottom: 20px;
}
.mainBody ul[dir=rtl], 
.textContent ul[dir=rtl], 
.mceContentBody ul[dir=rtl] {
    margin-left: 0;
    margin-right: 30px;
}
.blue-box ul li,
.mainBody ul li, 
.textContent ul li, 
.mceContentBody ul li {
list-style-type: disc;
}

.blue-box ul:not(.contactTypeList) > li:before,
.mainBody ul > li:before, 
.textContent ul > li:before, 
.mceContentBody ul > li:before {

    /* list-style-type: disc;
    width: 13px;
    height: 13px;
    -ms-border-radius: 50%;
    border-radius: 50%;
    background: #006ebf;
    display:block;
    content: "";

    position: absolute;
    top: 7px;
    left: -27px;

    /*line-height: 30px;
    text-align: center;
    font-family: 'icomoon';
    content: "\25cb";
    color: #006ebf;
    font-size: 20px;*/
}

@media(min-width:1025px) {
    .blue-box ul:not(.contactTypeList) > li::before,
    .mainBody ul > li:before,
    .textContent ul > li:before,
    .mceContentBody ul > li:before {
        font-size: 30px;
        left: -25px;
        /*margin-top: -6px;*/
    }        
}

.mainBody p{
    margin-bottom: 1rem;
}

/* RTL overrides */
.mainBody ul[dir=rtl], .mainBody ol[dir=rtl], 
.textContent ul[dir=rtl], .textContent ol[dir=rtl],
.mceContentBody ul[dir=rtl], .mceContentBody ol[dir=rtl] {
    margin-left: 0;
    margin-right: 30px;
}
.mainBody ul[dir=rtl] > li:before, 
.textContent ul[dir=rtl] > li:before, 
.mceContentBody ul[dir=rtl] > li:before {
    left: auto;
    right: -25px;
}

.main-body-text p {
    margin-bottom: 20px;
}

.main-body-text a {
    font-weight: 700;
    text-decoration: underline;
}

/* Editor classes */
.ingress {
    font-size: 22px;
    line-height: 27px;
}


/* TABLES */
table.table, table.tableRow
{
    border: none;
    margin-left: auto;
    margin-right: auto;
}
.tableRow th {
    border-bottom: 3px solid;
}
.table th {
    border-right: 3px solid;
}
.table td, .table th, .tableRow td, .tableRow th {
    padding: 5px;
}
.tableRow th {
    background:rgba(0,0,0,0.03);
}
.table th:nth-child(odd), .table td:nth-child(odd)
{
    background:rgba(0,0,0,0.03);
}
.tableRow > tbody > tr:nth-child(even)
{
    background:rgba(0,0,0,0.03);
}
.tableRow > thead > tr > td, .table > thead > tr > td {
    font-weight: bold;
}

/*.table tr:nth-child(even)
{
    background:rgba(0,0,0,0.03);
}*/
.table td:first-child, .table th:first-child {
    padding-left: 0;
}
.table td:last-child, .table th:last-child {
    padding-right: 10px;
}
.tableRow tr:first-child, .tableRow th:first-child {
    padding-left: 0;
}
.tableRow tr:last-child, .tableRow th:last-child {
    padding-right: 10px;
}


/* TÄNK PÅ */
.tankpa
{
    background: #e8f1f4;
    position: relative;
    margin: 30px -15px 30px;
    padding: 15px 15px 3% 60px;
}
.tankpa:before {
    content: "!";
    position: absolute;
    font-family: 'HelveticaNeueW01-55Roma';
    color: #004C85;
    font-size: 100px;
    line-height: 100px;
    left: 15px;
    top: 50%;
    margin-top: -55px;
}
.tankpa:after {
    content: "";
    position: absolute;
    border-left: 800px solid transparent;
    /*border-bottom: 24px solid #fff;*/
    top: 100%;
    right: 0;
    margin-top: -3%;
} 


@media (min-width: 768px) {
    h1, .h1 {
    font-size: 30px;
    line-height: 35px;
    }
    h2, .h2 {
    font-size: 25px;
    line-height: 32px;
    }
    h3, .h3 {
        font-size: 19px;
        line-height: 27px;
    }
    .ingress {
        font-size: 19px;
        line-height: 27px;
    }
}


/* Special case media query: Viktigt-box adjust to fit width of window */
@media (min-width: 950px) {
    .tankpa, p.tankpa
    {
        margin: 30px 0 30px;
        padding: 15px 20px 3% 150px;
    }
    .tankpa:before {
        left: 65px;
    }
    .tankpa:after {
        border-left: 1100px solid transparent;
        border-bottom: 33px solid #fff;
    }
}