/*adding fonts*/
@font-face {
    font-family: TeleGrotestNext-Medium;
    src: url(/Content/fonts/TeleGroteskNext-Medium.woff) format('woff');
}

@font-face {
    font-family: TeleGrotestNext-Regular;
    src: url(/Content/fonts/TeleGroteskNext-Regular.woff) format('woff');
}
@font-face{
    font-family: TeleGroteskNext-Ultra;
    src:url(/Content/fonts/TeleGroteskNext-Ultra.woff) format('woff');
}

/*The height of the html and body so that the footer is at the end of the screen*/
html, body {
    min-height: 100%;
}

#homePageFirst {
    background: rgba(255,255,255, 0.9);
    width: 43%;
    color: black;
    padding: 2%;
}

#homePageFirst .btn {
        padding: 4px 15px !important;
        width: 100px;
}


/*the language select options*/
#langSelect {
    /*For FireFox*/
    -webkit-appearance: none;
    /*For Chrome*/
    -moz-appearance: none;
    background: transparent url("/Content/icons/Icons/expand_outline.svg") no-repeat 90% 50%;
    background-size: 15px;
    padding-right: 15px;
    font-size: 0.9375rem;
    margin-top: 4px;
    width: 52px;
}
/*For IE10+*/
#langSelect::-ms-expand {
    display: none;
}

/*Log in partial*/
#logInPartial {
    /*For FireFox*/
    -webkit-appearance: none;
    /*For Chrome*/
    -moz-appearance: none;
    background: transparent url("/Content/icons/Icons/expand_outline_magenta.svg") no-repeat 80% 50%;
    background-size: 15px;
    padding-right: 15px;
    font-size: 0.9375rem;
    margin-top: 4px;
}
#logInPartial::-ms-expand {
    display: none;
}
/*The dropdown button in login partial removed*/
.dropdown-toggle::after {
    display: none;
}

/*the body styling*/
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: auto;
    font-family: TeleGrotestNext-Regular;
    font-size: 0.9375rem !important;
    line-height: 120%;
    padding-top: 141px;
    /*The height of the body so that the content is at the end of the site*/
    min-height: 85.4vh;
}

/*The font of the menu*/
.menuFont {
    font-size: 116%;
}
/*the menu button*/
#menuButton{
    border:none;
    z-index: 5000;
}
#menuButton:focus, #menuButton:active {
    border: none;
}

/*Main page title about the department...*/
.mainPageAbout {
    color: #e20074;
    font-family: TeleGroteskNext-Ultra;
    text-transform: uppercase;
}
/*the right part of the navbar*/
#rightMenu {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 5px;
}
.theNavBar {
    margin-right: 14px;
    color: #6B6B6B;
}
.navbar-light .navbar-nav .active > .nav-link{
    color: #e20074;
}


/*the titles where font medium should be used*/
.fontMedium {
    font-family: TeleGrotestNext-Medium;
    font-size: 0.9375rem !important;
}

/*Z-index for the menu button and the right menu...*/
.zIndex{
    z-index: 5000;
}

/*The font of the header in the picture in About Us page*/
#fontUltraAboutUs {
    font-family: TeleGroteskNext-Ultra;
    text-transform: uppercase;
    color: white;
    background-color: #e20074;
    font-size: 2.6vw;
    width: 69vw;
    padding: 1.2vw;
    margin-bottom: 0px;
}


/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 350px;
}


/*brandbar*/
header {
    min-height: 80px;
}
#brandBackground {
    background-color: #e20074;
}


/*footer*/
#footerMain {
    background-color: #262626;
    margin-bottom: auto;
    margin-top: 32px;
}
footer .container {
    padding-top: 15px;
    padding-bottom: 15px;
}


/*The tenders switch in tenders page*/
.theSwitch {
    width: 100%;
    border: 1px solid #e20074;
}
.theSwitch:focus{
    box-shadow:none;
}


/*The switch colors in Tenders Page*/
.magentaColor {
    background-color: #e20074;
    color: white;
}
.magentaColor:hover {
    color: white;
}
.defaultColor {
    background-color: white;
    color: #e20074;
}
.defaultColor:hover {
    color: #e20074;
}


/*styles for all anchor links no-text-decoration*/
a:hover, .btn a {
    text-decoration: none !important;
}


/*link style in details page download*/
.downloadFileLink {
    color: #00A0DE;
}


/*HomePage Tenders jumbotrons links*/
.homePageTenders {
    background-color: #e20074;
    padding: 30px;
    color: white;
    text-decoration: none;
}
.homePageTenders:hover {
    background-color: white;
    color: #e20074 !important;
    box-shadow: 0 0 0 1px #e20074;      
}


/*The second jumbotron in the home page that takes the user to the about us page*/
.homePageProcurement {
    background-color: #6B6B6B;
    color: white;
    font-size: 1.5rem;
    height: 100px;
    line-height: 120%;
}


/*the jumbotrons in the News Page*/
.newsJumbotrons {
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    background-color: #EDEDED;
}
.newsJumbotrons p {
    font-size: 0.9375rem !important;
    line-height: 120%;
}


/*The fonts for the News Page*/
.textT span[style], .textT b {
    font-size: 0.9375rem !important;
    font-weight: normal !important;
    font-weight: 400 !important;
    line-height: 120%;
}


/*The fonts for the Tenders Page*/
.TendersPageContent, .TendersPageContent b, .TendersPageContent p span strong, .TendersPageContent p span strong span strong, .TendersPageContent p span[style], .TendersPageContent p span, .TendersPageContent div span, .TendersPageContent p font{
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    font-family: TeleGrotestNext-Regular;
    line-height: 120%;
}
.TendersPageContent p[style] {
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    line-height: 120%;
}


/*The grey color for the cards in Tenders and Terms And Conditions Page*/
.cardContent .card-header, #accordion .card-header, .greyCard{
    background-color: #EDEDED;
}
/*grey color added to buttons etc.*/
.greyColor {
    background-color: #6B6B6B;
    color: white;
}


/*searchbar for the keywords, intially not displayed*/
#KeyWords {
    display: none;
    margin-top: 4px;
}
#theSearchX {
    position: absolute;
    right: 0;
    margin-right: 10px;
    margin-top: 9px;
    visibility: hidden;
    color: #ced4da;
}

/*The details buttons in tenders page*/
.buttonsTendersPage {
    background-color: #e20074;
    color: white;
}
.buttonsTendersPage:hover{
    color: white;
}

/*The 4 last cards in the home page*/
.theLastLinksHomePage .card-text{
    color: #262626;
}


/*Tender details page*/
.marginNegative {
    margin-left: -1%;
}

/*NavBar background*/
.theNavBar{
    background-color: white;
}

/*The year list in news page*/
.theYearsListNewsPage {
    margin-left: auto;
    margin-bottom: 20px;
}




/*terms and conditions cards...*/
.card-header .btn{
    word-break: break-word;
    white-space: normal;
    text-align: left;
}
.card-header .buttonsTendersPage {
    word-break: unset;
}

/*footer the copyright makedonski telekom*/
#copyrightMT{
    margin-left:auto;
}



/*tenders page pagination styling*/
.thePaginationTenders .paginationIn a {
    color: #e20074;
}
.thePaginationTenders .page-item.active .page-link {
    background-color: #e20074;
    border-color: #e20074;
}
.thePaginationTenders .page-item :hover {
    background-color: #e20074;
    border-color: #e20074;
    color: white;
}
.thePaginationTenders .page-link{
    border: none;
}

/*the contact form modal dialog */
.modal-dialog{
    max-width: 400px;
}

/*The table in Vendors page*/
.sistemZaKvalifkacija td {
    border: 1px solid black;
    border-collapse: collapse;
}

.magentaBorderLeft{
    border-left:double 1px magenta;
}






/*<<<<<<<<<<<<<<<<<<REAL ESTATE>>>>>>>>>>>>>>>>*/

/*The gray background in real estate sales for xs devices...*/
.greyBackground, .greyBackgroundB, .greyBackgroundC, .greyBackgroundD {
    background-color: #EDEDED;
}

/*The buttons for contact form in real estate for xs devices*/

.formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
    margin: 15px;
    margin-left: 145px;
}


/*Small devices (landscape phones, 576px and up)*/

@media (min-width: 576px) {
    .formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
        margin: 15px;
        margin-left: 365px;
    }
}

@media (max-width: 768px){
    .footerT {
        display: inline-block !important;
        text-align: center;
    }
    #homePageFirst p {
        margin-bottom: 0;
    }
    #homePageFirst{
        width: 76px;
    }
    #homePageFirstImg{
        height: 200px;
    }


}
/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .greyBackground {
        background-color: #EDEDED;
        height: 1210px;
    }

    .greyBackgroundB {
        background-color: #EDEDED;
        height: 1035px;
    }

    .greyBackgroundC {
        background-color: #EDEDED;
        height: 1434px;
    }

    .greyBackgroundD {
        background-color: #EDEDED;
        height: 1150px;
    }

    .formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
        margin: 8px;
        margin-left: 74px;
    }

    #homePageFirstOverlay{
        margin-top: 2%;
    }

    

    
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
        margin: 12px;
        margin-left: 150px;
    }

    .greyBackground {
        background-color: #EDEDED;
        height: 955px;
    }

    .greyBackgroundB {
        background-color: #EDEDED;
        height: 860px;
    }

    .greyBackgroundC {
        background-color: #EDEDED;
        height: 990px;
    }

    .greyBackgroundD {
        background-color: #EDEDED;
        height: 940px;
    }
}

@media(min-width: 993px){
    .formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
        margin: 12px;
        margin-left: 140px;
    }

    .greyBackground {
        background-color: #EDEDED;
        height: 955px;
    }

    .greyBackgroundB {
        background-color: #EDEDED;
        height: 860px;
    }

    .greyBackgroundC {
        background-color: #EDEDED;
        height: 1100px;
    }
}
@media (min-width: 1200px) {

    /*The gray background in real estate sales*/

    .formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
        margin: 12px;
        margin-left: 200px;
    }

    .greyBackground {
        background-color: #EDEDED;
        height: 830px;
    }

    .greyBackgroundB {
        background-color: #EDEDED;
        height: 775px;
    }

    .greyBackgroundC {
        background-color: #EDEDED;
        height: 930px;
    }

    .greyBackgroundD {
        background-color: #EDEDED;
        height: 850px;
    }
}



/*more responsitivity for smaller devices*/
@media (max-width: 1135px) {
    /*Log in partial the email broken in lines...*/
    #emailNewLine {
        word-break: break-word;
        white-space: normal;
    }
}
@media (max-width: 992px) {
    .body-content {
        padding: 0;
        padding-top: 141px;
        margin-left: auto;
        margin-right: auto;
    }

    .navbar {
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .theNavBar {
        background-color: white;
        padding-top: 9px;
        margin-right: -3px;
        margin-left: -3px;
    }

    .theLastLinksHomePage {
        margin-bottom: 32px;
    }

    #copyrightMT {
        margin-left: 0;
        text-align: center;
    }

    #homePageFirst {
        background: rgba(255,255,255, 0.9);
        width: 75%;
        color: black;
        padding: 1%;
    }
}
@media (max-width: 550px) {
#homePageFirst {
            width: 102%;
        }

            #homePageFirst .btn {
                margin-top: 0%;
            }

}
@media (max-width: 440px){
    .mainPageAbout {
        margin-left: 1%;
    }
    #homePageFirst {
        width: 103% !important;
        margin-left: 1%;
    }

        #homePageFirst .btn {
            margin-top: 0%;
        }
}
/*devices when the right menu starts to behave weirdly....*/
@media (max-width: 414px) {
    #KeyWords {
        width: 120px;
    }

    #rightMenu {
        position: absolute;
        left: 0;
    }

    #homePageFirstOverlay {
        padding-left: 0px !important;
    }

    #homePageFirst {
        width: 100%;
    }

        #homePageFirst .btn {
            margin-top: 0%;
        }
}

    @media (max-width: 320px) {
        #KeyWords {
            width: 80px;
        }

        #rightMenu {
            position: absolute;
            left: 0;
        }

        .body-content {
            padding-right: 3px;
            padding-left: 3px;
        }
    }

    .control {
        font-family: TeleGrotestNext-Regular;
        display: block;
        position: relative;
        padding-left: 27px;
        margin-bottom: 10px;
        padding-top: 2px;
        cursor: pointer;
        font-size: 16px;
    }

        .control input {
            position: absolute;
            z-index: -1;
            opacity: 0;
        }

    .control_indicator {
        position: absolute;
        top: 0px;
        left: 0;
        height: 22px;
        width: 22px;
        background: #e6e6e6;
        border: 1px solid #bfbfbf;
        border-radius: 3px;
    }

    .control-radio .control_indicator {
        border-radius: 3px;
    }

    .control:hover input ~ .control_indicator,
    .control input:focus ~ .control_indicator {
        background: #e2e2e6;
    }

    .control input:checked ~ .control_indicator {
        background: #e2e2e6;
    }

    .control:hover input:not([disabled]):checked ~ .control_indicator,
    .control input:checked:focus ~ .control_indicator {
        background: #e2e2e6;
    }

    .control input:disabled ~ .control_indicator {
        background: #e6e6e6;
        opacity: 0.6;
        pointer-events: none;
    }

    .control_indicator:after {
        box-sizing: unset;
        content: '';
        position: absolute;
        display: none;
    }

    .control input:checked ~ .control_indicator:after {
        display: block;
    }

    .control-checkbox .control_indicator:after {
        left: 7px;
        top: 2px;
        width: 5px;
        height: 11px;
        border: solid #6bb324;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

    .control-checkbox input:disabled ~ .control_indicator:after {
        border-color: #7b7b7b;
    }

    .main-category {
        font-size: 18px !important;
        font-family: TeleGrotestNext-Medium;
    }

    .font-medium {
        font-family: TeleGrotestNext-Medium;
    }


    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        /* IE10+ CSS styles go here */
        .theLastLinksHomePage img {
            width: 240px;
        }

        .formButton1, .formButton2, .formButton3, .formButton4, .formButton5, .formButton6, .formButton6, .formButton7, .formButton8 {
            margin: 12px;
            margin-left: 200px;
        }

        .greyBackground img, .greyBackgroundB img, .greyBackgroundC img, .greyBackgroundD img {
            width: 350px;
        }

        .greyBackground {
            background-color: #EDEDED;
            height: 830px;
        }


        .greyBackgroundB {
            background-color: #EDEDED;
            height: 775px;
        }

        .greyBackgroundC {
            background-color: #EDEDED;
            height: 930px;
        }

        .greyBackgroundD {
            background-color: #EDEDED;
            height: 850px;
        }

        .aboutUsPic {
            width: 1300px;
            height: 300px;
        }

        .fontUltraAboutUs {
            font-size: 2px !important;
            width: 53px !important;
        }
    }

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    }

    /* Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
    ...
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
    ...
}

// Large devices (desktops, 992px and up)
@media (min-width: 992px) {
    ...
}

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) {
    ...
}*/