@import "tb-or.css";

@import "../themes/fonts/nunito-sans.css";

@import "footer.css";

@import "service-categories.css";

@import "news.css";

@import "interestbox.css";

@import "mapinfobox.css";

@import "service-list.css";

@import "service-details.css";

@import "wizard.css";

@import "forms.css";

@import "help-label.css";

@import "typeaheadjs.css";

@import "pane.css";

html {
    overflow: -moz-scrollbars-vertical;
    overflow-y: scroll;
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-size: 15px;
    line-height: 1.4em;
    padding-top: 96px;
}

h1 {
    font-size: 40px;
    line-height: 45px;
}

h2 {
    font-size: 30px;
    line-height: 35px;
}

h3 {
    font-size: 20px;
    line-height: 35px;
}

h4 {
    font-size: 15px;
    line-height: 20px;
}

.navbar a, .btn { text-decoration: none; }

img { max-width: 100%; }

/*BOXES*/

.cbb {
    background-color: #FFFFFF;
    border: none;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    color: #333333;
    margin-bottom: 30px;
    padding: 20px;
}

.cbb th a {
    color: #333333;
    text-decoration: none;
}

.cbb.tab h3 {
    font-size: 200%;
    margin: 0;
}

.cbb.tab {
    background-color: #333333;
    border: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #FFF027;
    margin-bottom: 0px;
    margin-top: 15px;
}

/*BOXES*/

/*BUTTONS*/

.btn-green {
    border-top-color: #fff;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    color: #525918;
    position: relative;
    text-decoration: none;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.btn-green:hover {
opacity: 0.9;
}

a.btn-green { color: #525918; }

.btn-green:active {
    background-image: none;
    border-bottom-color: #fff;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .25);
    outline: 0;
}

.btn-get-connected .arrow {
    background: url('/img/icons/arrow-icon-r.png') no-repeat right;
    display: inline-block;
    height: 27px;
    position: absolute;
    top: 8px;
    width: 30px;
}

.btn-get-connected span:first-child { margin-left: -30px; }

.btn-black, .btn-black:hover {
    background-color: #333333;
    border-color: transparent;
    color: #FFFFFF;
    position: relative;
    text-decoration: none;
}

.customercategory .current.mypages {
    color: #551A8B;
}

/*BUTTONS*/


/*NAVBAR*/

/* Specify text color for mobile */
@media (max-width: 767px) {
    .navbar a, .navbar a:hover { color: #333333; }
}

/*Different position of customer category selector for mobile and desktop*/

@media (max-width: 767px) {
    .customercategory {
        position: fixed;
        right: 15px;
        top: 88px;
    }
}

@media (min-width: 768px) {
    .customercategory {
        position: absolute;
        right: 8px;
    }
}

.customercategory .current {
    background: transparent linear-gradient(180deg, #f0f0f0 0%, #dbdbdb 100%);
    color: #000;
    box-shadow: 0 0 1px 1px rgb(0 0 0 / 20%);
    cursor: pointer;
}

.customercategory span:not(.current) a { color: #999999; }

.customercategory span {
    display: inline-block;
    margin: 0 2px;
    padding: 4px 8px;
    background-color: rgb(0 0 0 / 3%);
    border-bottom-left-radius: 5px;
    box-shadow: 0 0 1px rgb(0 0 0 / 25%);
    border-bottom-right-radius: 5px;
}

.customercategory a:hover {
opacity: 0.8;
}

.navbar-right li a {
    padding-left: 10px;
    padding-right: 10px;
}


@media (max-width: 767px) {
    .language-select-icon {
        background: url('/img/icons/language-select-icon.png') no-repeat center bottom;
        display: inline-block;
        height: 20px;
        margin-left: 5px;
        margin-right: 5px;
        position: relative;
        top: 0;
        width: 20px;
    }
}

@media (min-width: 768px) {
    .language-select-icon {
        background: url('/img/icons/language-select-icon.png') no-repeat left bottom;
        display: inline-block;
        height: 20px;
        left: 0px;
        position: absolute;
        width: 20px;
    }
}


.navbar-brand {
    margin-right: 15px;
    margin-top: 5px;
}

.navbar-my-fiber-mobile {
    float: right;
    margin-top: 60px;
    margin-right: -40px;
}

.headerlock {
    background: url('/img/icons/header_lock.png') no-repeat;
    display: inline-block;
    height: 16px;
    width: 16px;
}

/*NAVBAR*/

/*Remove the 15px margin from bootstrap to make fullwidth background work*/
.br-content { padding: 0px; }

/* Reset the padding above to original state for the content area when order wizard is present */
.br-content:has(.order-wizard) {
    padding: 15px;
}

/*We don't want margin so that empty containers are visible */

.br-content > *:first-child { margin-top: 20px; }

/*We don't want margin so that empty containers are visible */

.br-content > *:last-child { margin-bottom: 20px; }

.br-bg-default {    
    background-color: #FFFFFF;    
    color: #333333;
}

.br-bg-light {
    background-color: #e6e6e6;
    color: #333333;
}

.br-bg-alternative {
    background-color: #333333;
    color: #FFFFFF;
}

.br-bg-alternative2 {
    background-color: #333333;
    color: #FFFFFF;
}

.sign-up-bg {
    background: url('/sites/defaulttemplate/img/backgrounds/signup_background-default.jpg') no-repeat #333333;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0;
}

.start-header {
    background-image: url('/sites/defaulttemplate/img/start-default.jpg');
    background-position: center;
    background-size: cover;
    min-height: 500px;
    padding-bottom: 40px;
}

/*The fullwidth are usually used in content to make fullwidth backgrounds possible, the margin is then applied from br-content*/

.fullwidth { max-width: none; }

.br-content .fullwidth { margin: 0px; }

#header1 {
    position: relative;
    top: 35px;
}

#header1 .ingress {
    font-size: 18px;
    line-height: 1.4em;
}

/*Language selector*/

.navbar-right .dropdown-menu {
    padding: 10px;
    text-align: right;
}

/*SERVICE LIST*/

.servicelist table tr td:last-child { text-align: right; }

/*Make service provider list smaller in additional steps to fit in mobile view*/
@media (max-width: 525px) {
    .cbb {
        font-size: 90%;
        padding: 6px;
    }

    .col-md-12 {
        padding: 8px;
    }

    .servicelist td img {
        width: 25px;
        margin: 0px 2px 0px 0px;
    }
}

/*Let table collapse even further in tiny view*/
@media (max-width: 380px) {
    .cbb {
        word-break: break-word;
    }
}

/*Set Read more text link to bold*/
@media (max-width: 767px) {
    .cbb .visible-xs {
        font-weight: 600;
    }
}
/*End of smallification*/

.toggleboxbutton {
    cursor: pointer;
    color: #595959;
    font-size: 95%;
}

.toggleboxbutton:hover {
    opacity: 0.85;
}

/*Some padding for the toggled content when toggleboxbutton is used in a table row. For example the page that lists addon services*/
.togglebox {
    margin-top: 20px;
}

/*Address search*/

.address-search .control-label {
    font-size: 14px;
    font-weight: normal;
}

.contactdetails-sub .sbox { display: none; }

/*Make anchors work with the top bar, so they wont be hidden under it*/

a.top {
    display: block;
    height: 0;
    position: relative;
    top: -95px;
    width: 0;
}

.errorpane { text-align: center; }