@charset "utf-8";

@font-face {
    font-family: PlutoSansDPDExtraLight;
    src: url(fonts/OTF/PlutoSansDPDExtraLight.otf);
}
@font-face {
    font-family: PlutoSansDPDLight;
    src: url(fonts/OTF/PlutoSansDPDLight.otf);
}
@font-face {
    font-family: PlutoSansDPDRegular;
    src: url(fonts/OTF/PlutoSansDPDRegular.otf);
}
@font-face {
    font-family: PlutoSansDPDThin;
    src: url(fonts/OTF/PlutoSansDPDThin.otf);
}
@font-face {
    font-family: Code128;
    src: url(fonts/OTF/Code128.otf);
}

:root {
   --DPD-Red: #dc0032;
   --DPD-Dark-Red: #a90034;
   --DPD-Black: #414042;
   --DPD-Warm-Grey: #cac4be;
   --DPD-Mid-Grey: #808285;
   --DPD-Light-Grey: #e6e7e8;
   --DPD-Green: #228B22;
}


html {
    height: 100%;
    overflow: hidden;
}

body {
    height: 100%;
    margin: 0;
    padding: 0;
}



.officeInfo {
    font: 11px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
    color: #414042; /*183884, 20409A*/
    min-width: 200px;
    max-width: 220px;
}

.tableHeader {
    width: 100%;
}

.divOfficeAddress {
    margin-top: 0;
    margin-bottom: 12px;
    padding-top: 5px;
    border-top: 1px solid #414042;
}

.centerPointInfo {
    font: 11px Arial, Helvetica, sans-serif;
    color: #414042;
}

.captionButton, .officeImageButton {
    background: #eee no-repeat 0px 0px;
    border: 1px solid #dc0032;
    border-radius: 3px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .1);
    cursor: pointer;
    display: -moz-inline-box;
    display: inline-block;
    font-size: 12px;
    font-weight: normal; /*bold*/
    line-height: normal !important;
    padding: 6px 6px; /*2px 6px*/
    text-align: center;
    text-decoration: none;
    vertical-align: top;
    white-space: nowrap;
    color: #FFFFFF;
    background-color: #dc0032;
    font: 11px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
}

.grayButton:active {
    background: #ddd;
    border-bottom-color: #999;
}

.captionButton { float: right; }
.officeImageButton { float: left; }

.captionButton .captionButtonText, .captionButton input  {
    background: none;
    border: 0;
    color: #333;
    cursor: pointer;
    display: -moz-inline-box;
    display: inline-block;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    outline: none;
    padding: 1px 0 2px;
    white-space: nowrap
}

.divOfficeButtons { margin-bottom: 12px; }

hr.style-two {
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

a.aOfficeLink {
    font-weight: bold;
    text-decoration: none; /*border-bottom: 1px dashed; padding-bottom: 2px; */
    color: #414042;
}

a:hover.aOfficeLink {
    color: #dc0032;
}

a.aOfficeImageLink {
    font-weight: bold;
    text-decoration: none; /*border-bottom: 1px dashed; padding-bottom: 2px; */
    color: #dc0032;
}

a:hover.aOfficeImageLink {
    color: #414042;
}


div.divOfficeWorkingTimeOverride {
    color: #dc0032;
}

.imgIcon {
    margin-right: 3px;
    border: 1px solid;
    border-color: #000000;
    /* To avoid anti-aliasing */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

.imgIconDpdStyle {
    width: 32px;
    height: 32px;
    margin-right: 3px;
    border: 1px solid;
    border-color: var(--DPD-Mid-Grey);
    /* To avoid anti-aliasing */
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

.imgIconDirections {
    cursor: pointer;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

.divIcons {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
}

.divIconsLeft {
    width: 60%;
    float: left;
}

.divIconsRight {
    width: 40%;
    float: right;
    text-align: right;
}

.divIconsRight img:last-child{
    margin-right:unset;
}


/*
GOOGLE MAPS DIVS WHICH ARE RENDERED ON THE MAP:
div.gm-style-iw  & div.gm-style-iw-d

gm-style-iw - google maps style info window
gm-style-iw-tc - The arrow bottom of the info window
*/

div.gm-style-iw {
    max-height: 300px !important;
    overflow: scroll;
}
div.gm-style-iw-d {
    max-height: 300px !important;
    overflow: scroll;
}






/* Заглавен ред */
.gm-style-iw-chr {
    /* background-color: lightblue; */
    height: 10px !important;
}

.gm-ui-hover-effect {
    /* display: none !important; */
    width: 28px !important;
    height: 28px !important;
}

.gm-style-iw button {
    /* border: 1px solid red !important; */
    padding: 0px;
}

/* В този спан се намира хикса */
.gm-style-iw button > span {
   margin: 10px 0px 0px 0px !important;
}

/* Премахва бордера от бутона Х на балона с инфо за офиса */
.gm-style-iw button:focus {
   outline: 0 !important;
}

/* Премахва син бордер около картата. https://stackoverflow.com/questions/66669173/google-maps-js-api-shows-blue-focus-border */
.gm-style iframe + div { border: none !important; }

.gm-style-mtc > div:first-child {
  width: 60px;
  height: 20px;
  font-size: 15px !important;
}

.gm-style-mtc > div > div {
  width: 100%;
  height: 100%;
  font-size: 15px !important;
}
/* Pegman (Google street views) */
.gm-svpc {
  transform: scale(1);
}


.divImageHeader {}
.divImageOfficeName { color: #dc0032; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; font-weight: bold; width: calc(100% - 30px) }
.divImageOfficeAddress { color: #414042; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; }
.divImageButtonClose { float: right; } /* the width is 30 */
.divOfficeImage { }

  
/* The popup form - hidden by default */
.form-popup-di, .divConfirmOfficesDisplay {
   display: none; /*none, block*/
   position: fixed;
   border: 1px solid #808285;
   border-radius: 4px;
   background-color: #FFFFFF;
   color: var(--DPD-Dark-Red);
   z-index: 1000;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   font: 14px Roboto Condensed, Arial, Helvetica;
   padding: 6px;   
}

/* Set a style for the submit/login button */
.form-popup-di .btn {
  cursor: pointer;
}   

/* -------------------- Confirm message -------------------- */
.divConfirmBox {
   display: none; /*none, block*/
   position: fixed;
   border: 1px solid #808285;
   border-radius: 4px;
   background-color: #FFFFFF;
   color: var(--DPD-Black);
   z-index: 1000;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   width: 268px;
   font: 12px PlutoSansDPDLight, Arial, Helvetica;
   text-align: center;
   padding: 15px;
   top: 200px;
   left: 50%;
   transform: translate(-50%, 0);
}
.divConfirmBoxButtons {
   margin-top: 10px;
}

.btnConfirmBoxYes, .btnConfirmBoxNo {
   border-radius: 4px;
   font: 12px PlutoSansDPDLight, Arial, Helvetica;
   width: 70px;
   padding: 5px 0px;
   margin: 0px 5px;
   cursor: pointer;
}

.btnConfirmBoxYes {
   border: 1px solid var(--DPD-Dark-Red);
   background-color: var(--DPD-Red);
   color: #FFFFFF;
}

.btnConfirmBoxNo {
   border: 1px solid var(--DPD-Black);
   background-color: var(--DPD-Light-Grey);
   color: var(--DPD-Black);
}

.divConfirmBoxCloseButton {
   cursor: pointer;
   float: right;
   position: fixed;
   top: 5px;
   right: 5px;
}


.divContextMenu {
   display: none; /*none, block*/
   position: fixed;
   border: 1px solid #808285;
   border-radius: 4px;
   background-color: #FFFFFF;
   color: var(--DPD-Black);
   z-index: 1000;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   width: auto;
   font: 12px PlutoSansDPDLight, Arial, Helvetica;
   text-align: left;
}
.divContextMenuItem {
   cursor: pointer;
   margin: 10px;
}
.divContextMenuItem:hover {
   color: var(--DPD-Red);
}

/* -------------------- FORMAT WORKING TIME -------------------- */
/* Този css трябва да го има и в двете страници office_finde и Google картата, само че с различи стойности. Една и съща функция се използва а форматиране на работното време и на двете места, но css трябва да е различен */
.divWtBlock { margin-top: 15px; }

.divWtTitle, .divWtExTitle { font-weight: bold; } 
.divWtTitle { color: #414042; } 
.divWtExTitle { color: #dc0032; } /* извънредно работно време */

.divWtText { line-height: 1.8; margin-top: 3px; }

.divWtRow, .divWtExRow { width: 100%; display: flex; margin-top: 2px;  }
.divWtRow { color: #808285; }
.divWtExRow { color: #dc0032; } /* извънредно работно време */

.divWtDay { width: calc(100% - 106px); display: inline; }

.divWtHours, .divWtExHours { width: 100px; display: inline; font-weight: bold; text-align: right; }
.divWtHours { color: #414042; }
.divWtExHours { color: #dc0032; } /* извънредно работно време */

.divWtMark { width: 6px; display: inline; text-align: right; }   


/*
   --DPD-Red: #dc0032;
   --DPD-Dark-Red: #a90034;
   --DPD-Black: #414042;
   --DPD-Warm-Grey: #cac4be;
   --DPD-Mid-Grey: #808285;
   --DPD-Light-Grey: #e6e7e8;
   --DPD-Green: #228B22;
.divLogoWithFilter {
    position: absolute;
    z-index: 999;
    border: 1px solid #cac4be;
    bottom: 20px;
    right: 46px;
    cursor: pointer;
    height: 40px;
}
*/
.divLogoWithFilter {
    position: absolute;
    z-index: 999;
    border: 1px solid #cac4be;
    top: 5px;
    right: 5px;
    cursor: pointer;
    height: 35px;
    width: auto;
}
.imgLogo {
    position: absolute;
    z-index: 999;
    border: 1px solid #cac4be;
    bottom: 70px;
    left: 5px;
    cursor: pointer;
    height: 35px;
    width: auto;
}


.mapFilters {
   position: absolute;
   z-index: 999;
   top: 5px;
   left: 5px;
   width: auto;
}

/* -------------------- Filter -------------------- */
.divFilter {
   background-color: #FFFFFF;
   padding: 7px 5px 5px 7px;
   border-radius: 5px;
   border: 1px solid #cac4be;
   font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
   color: #dc0032;
   vertical-align: top;
   box-shadow: inset 0 0 5px #D7D7D7;
}

.divFilterElement {
   display: inline-block;
   vertical-align: top;
   margin-right: 3px;
}
.imagelanguageFlag {
    margin-top: 1px;
    cursor: pointer;
}

#divFilterTitle { display: inline-block; vertical-align: middle; height: 17px; padding-top: 4px; color: #414042; cursor: pointer; }
#divFilterDetails { width: auto; }

.selectOfficeType {
   border: 1px solid var(--DPD-Warm-Grey);
   border-radius: 3px;
   font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
   color: var(--DPD-Red);
   outline: none;
   padding: 1px 0px;
}
.selectOfficeType > option { direction: ltr; }

.buttonFilterOffices {
   cursor: pointer;
   border: 1px solid var(--DPD-Dark-Red);
   border-radius: 3px;
   padding: 2px 10px;
   font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
   background-color: var(--DPD-Red);
   color: #FFFFFF;
}
.buttonFilterOffices:hover {
   background-color: var(--DPD-Dark-Red);
}
.divMenuIcon { width: 16px; display: inline-block; vertical-align: top; }
.divMenuIcon > div { height: 2px; background-color: #414042; margin: 2px 0; }

/* Checkboxes */
input {
    appearance: none;
}
#dropOff, #pickUp {
    border: 1px solid var(--DPD-Dark-Red);
    border-radius: 3px;
    width: 14px;
    height: 14px;
    vertical-align: -6px;
    position: relative;
}

#dropOff::before, #pickUp::before {
    content: '✔'; /* unicode-table.com */
    /*content: '■';*/
    color: var(--DPD-Red);
    visibility: hidden;
    position: absolute;
    top: -3px;
    right: 1px;
}

#dropOff:checked::before, #pickUp:checked::before {
    visibility: visible;
}



/* -------------------- Search Bar -------------------- */
.divSearchBar {
   /*
   position: absolute;
   top: 60px;
   left: 9px;
   z-index: 999;
   width: 400px;
   */
   margin-top: 5px;
   height: 34px;
   background-color: #FFFFFF;
   border-radius: 5px;
   border: 1px solid #cac4be;
   font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
   color: #dc0032;
   vertical-align: top;
   box-shadow: inset 0 0 5px #D7D7D7;
}
.searchBoxMagnifyingGlass {
    float: left;
    margin: 7px;
    width: 20px;
    height: 20px;
}

/* Autocomplete suggestions https://stackoverflow.com/questions/7893857/how-do-you-style-the-dropdown-on-google-places-autocomplete-api */
.pac-container {}
.pac {
   float: left;
   width: calc(100% - 50px);
   margin: 0px;
   font: 13px PlutoSansDPDLight, Arial, Helvetica, sans-serif;
   color: var(--DPD-Black);
   border: 0px;
   padding: 0px;
   outline: none;
}
.pac-target-input {
   border: 0px solid #FF6600;
   color: var(--DPD-Black);
   margin-top: 9px
}
.pac-item { height: 20px; padding-top: 7px; font: 13px PlutoSansDPDLight, Arial, Helvetica, sans-serif; }
.pac-item:hover {}
.pac-icon {
    width: 15px;
    height: 20px;
    margin-right: 5px;
    margin-top: -2px;
    display: inline-block;
    vertical-align: top;
    background-image: url(https://maps.gstatic.com/mapfiles/api-3/images/autocomplete-icons.png);
    background-size: 34px;
}
.pac-matched { color: var(--DPD-Red); }
.pac-item-query {
    font-size: 13px;
    padding-right: 3px;
    color: #000
}



/* -------------------- @media screen -------------------- */
@media screen and (max-width: 430px) {
   .mapFilters {
       width: calc(100% - 12px);
   }
}

@media screen and (max-width: 360px) {
.divFilterElement {
   margin-right: 1px;
}
}