@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);
}
/*
#dc0032 - DPD Red
#a90034 - Dark Red
#414042 - DPD Black
#cac4be - Warm Grey
#808285 - Mid Grey
#e6e7e8 - Light Grey
*/
body{
    margin: 0;
    font-family: PlutoSansDPDLight, Arial, Helvetica;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: #747276;
    text-align: left;
}

hr {
    margin-top: 7px;
    margin-bottom: 7px;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}
label{
    /*cursor: not-allowed;*/
    pointer-events: auto;
    cursor: pointer;
}

label.disabledLabel {
    pointer-events: none;
    cursor: not-allowed;
    color: #cac4be;
}


a{
  color: #333333;
  text-decoration: none;
}
a:hover{
  color: var(--DPD-Dark-Red);
}
.row .formControl, .pakgeSizes .formControl{    
    line-height: 1.5;
    padding-left: 7px;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
}

.row .formControl:focus{    
    color: #495057;
    background-color: #fffbeb;
    border-color: #cac4be;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(202, 196, 190, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(202, 196, 190, 0.6);
}
#dropoffOffice:focus,#pickupOffice:focus, #documents:focus, #fragile:focus, #returnReceipt:focus
{
    color: #495057;
    background-color: #fffbeb;
    border-color: #cac4be;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(202, 196, 190, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(202, 196, 190, 0.6);
}

input.disabled {
    pointer-events: none;
    background-color: #e0e0e0 !important;
  }
.disabledLabel{
    color: #cac4be;
}

.calcTitle{
    text-align: center;
    font-size: 16px;
    color: #a90034;
}

.language{
    text-align: end;
    margin-right: 10px;
}

.language a{
    color: #a90034;
    text-decoration: none;
}

.calcFormWrapper {
    max-width: 780px;
    margin-right: auto !important;
    margin-left: auto !important;
    display: flex;
    flex-direction: column;
    padding-bottom: 10px;
}

.formSection{
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, 0.125);
    border-radius: 0.25rem;
    margin-bottom: 10px;
}


.sectionContent {
    width: calc(100% - 20px);
    /* min-width: 360px; */
    overflow: hidden;
    padding: 10px 10px 0px 10px;
    margin: 0 auto;
}

.sectionTitle {
    border-radius: 3px 3px 0px 0px;
    padding: 5px 15px 2px 15px;
    color: #fff;
    background-color: var(--DPD-Dark-Red);
}

.row{
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 10px;
   gap: 10px 10px; /* row-gap column gap */
   row-gap: 10px;
    margin: 10px  auto;
    height: 28px;
}

.innerRow{
    justify-content: space-between;
    display: flex;
    flex-direction: row;
    gap: 5px;
}

.coll{
    display: flex;
    flex-direction: column;
}

.calcLabel{
    width: 108px;
    margin-right: 10px;
    align-content: center;
    text-align: end;
}

.divLineBetween{
    height: 1px; 
    background-color: #cac4be; 
    margin: 15px; 
}

.checkBoxLabel{
    align-self: center;
    /*margin-left: 5px;*/
}

.dscriptionLabel{
    justify-self: right;
}

.addParcelRowBtn, .addPalletRowBtn, .addTyreRowBtn {
    color:  #a90034;    
    text-align: center;
    text-transform: uppercase;
    align-self: center;
    /*padding: 1rem 0.5rem;*/
    font-size: 0.75rem;
    text-decoration: none;
    line-height: 0.9;
    border-radius: 0.25rem;
}

.addRow:focus-visible, .deleteParcelBtn:focus-visible, input:focus-visible{
    outline: none;
}

.itemWidthSm{
    width: 4%;
}

/* .conutWidth{
    width: 40px;
} */

.itemWidthXS{
    width: 40px;
}
.itemWidthM{
    width: 8%;
}

.innerWidth{
    width: calc(100% - 3px) !important;
}

.xGap{
}

.itemWidthL{
    width: 180px; 
}

.itemWidthXL{
    width: 84%; 
}



.radioButonsLabel{
 margin-right: 25px;
 margin-left: 5px;
}

.radioButons{
    align-items: baseline;
   }


.calcContentLabel{
    align-self: flex-end;
    text-align: center;
}
.pakgeSizes{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
}

#parcelTypeTabLabelsContainer, .parcelTypeTab{
justify-content: space-between;
}

.contentItmem{
    margin-right: 20px;
}

.deleteParcelRowBtn{    
    color: #fff;
    background-color: #a90034;
    border: solid 1px #a90034;
    text-align: center;
    line-height: 0.9;
    border-radius: 3px;
}

.allRow{
    justify-content: flex-start;
}
.gap{
    width: 23%;
}

.buttonCalc{
    display: flex;
    justify-content: flex-end;
}

.inputButtonCalc{
    cursor: pointer;
    color: #fff;
    background-color: #a90034;
    border: solid 1px #a90034;
    text-align: center;
    text-transform: uppercase;
    align-self: center;
    padding: 5px 15px;
    font: 14px PlutoSansDPDLight, Arial, Helvetica;
    border-radius: 3px;
}

 #detailsButtonClose{
     margin-right: 3px;
     background-color: #d5d5d5;
     padding: 3px 5px;
}
#detailsWrapper, #statusWrapper{
    text-align: center;
    background: rgba(0,0,0,0.4);
    position: absolute;
    width: 100%;
    height: 120%;
    top: 1px;
    left: 2px;
    right: 5px;
	opacity: 1;
    display: none;
}



#calculatorDetails{
    background-color: #F1F1F1;
    color: #353434;
    margin: 0 auto;
    width: 22%;
    margin-top: 12%; 
    min-width: 370px;
}

.inputButtonClose { border: #D7D7D7 1px solid; color: #000000; font: 13px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: center; background-color: #F1F1F1; margin: 10px; padding: 10px 30px; cursor: pointer; } 

.divStatus { 
    width: 490px;
    margin: 0 auto; 
    margin-bottom: 20px;
    padding: 10px;
    /* border: solid 1px #a90034; */
    /* padding-top: 30px; */
    margin-top: 127px;
    background-color: #fff; 
    border-radius: 10px;
}

.divDetails{
    text-align: center;
    /* vertical-align: middle; */
}
.infoIcon{
    font-size: 20px;
    color: #a3a3a3;
}

.tdClosePricesBtn{
    padding: 0px;
    text-align: end; 
}

.closePricesBtn{
    border: 0;
    color: #a90034;
    border-radius: 3px;
    cursor: pointer;
}

.requiredSimbol, .errorText{
    color: #a90034;
}

.imgTelailsLink{
    width: 35px;
    margin: 0 auto;
}

.errorBorder{
    border:  solid 1px #a37f8a !important;
    /*background-color: #fff !important;*/
     -webkit-box-shadow: inset 0 1px 1px rgba(245, 9, 9, 0.075), 0 0 8px rgba(145 23 23 / 60%) !important;
    box-shadow: inset 0 1px 1px rgba(252, 2, 2, 0.075), 0 0 8px rgba(145 23 23 / 60%)!important ;
}
input::placeholder { text-transform: none; }
he
.divServicesAndPrices { font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: center; color: #a90034; margin-top: 3px; }
.tableServicesAndPrices { margin: 0 auto; font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: left; color: #a90034; margin: 3px 0px 0px 0px; }
.tableServicesAndPrices td { padding: 5px; }
.tdPricesServiceName { width: 40%; }
.tdPricesDelivery { width: 20%; }
.tdPricesWithVat { width: 20%; }
.tdPricesDetails { width: 20%; }
.divCalcServicesAdditionalText { max-width: 530px; text-align: center; }
.tableServicesTitle {text-align: center;}

.trRowListTitle { background-color: #a90034; text-align: center; color: #FFFFFF; }
.trRowList1 { background-color: #e6e7e8; text-align: left; }
.trRowList2 { background-color: #cac4be; text-align: left; }
.divButtons { 
    font-size: 11px;
    text-align: center;
    width: 400px; 
    margin: 0 auto;
    display: inline;
}

    .divButtonTariff { 
    font-size: 11px;
    }

.divError {margin: 0 auto; min-width: 340px; max-width: 400px; color: #FFFFFF; background-color: #dc0032; border: 1px solid #a90034; font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: center; padding: 10px; margin-bottom: 10px; }
.trTableServicesDetailsServiceName { text-align: center; font: 14px PlutoSansDPDLight, Arial, Helvetica, sans-serif; color: #a90034; }
.trTableServicesDetailsNotActiveRow { color: #999999; }
#calculationPriceWarning{
    font-size: 10px;
}

.tdLeft { text-align: left; }
.tdCenter { text-align: center; }
.tdRight { text-align: right; }
.divButtons { width: 400px; }
.divRequestLeft, .divRequestRight { 
    display: inline-table !important;
    text-align: center !important; 
    width: 150px !important; 
    height: 102px !important; 
    /* border: 1px solid var(--DPD-Mid-Grey) !important; */
    border-radius: 3px !important; 
    margin: 10px !important;
    /* background-color: #e6e7e8;  */
    padding: 5px; }

.enableServicesMessage{
    color: #a90034;
}
/* .divRequestLeft { float: left; }
.divRequestRight { float: right; } */
/* .inputButtonCalc, #detailsButtonClose { border: #a90034 2px solid; background-color: #FFFFFF; color: #a90034; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: center; padding: 7px 20px 7px 20px; cursor: pointer; } */
/* .calculatorIndex { font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: center; color: #000000; background-color: #FFFFFF; margin: 0px; padding: 0px; }
.calculatorDetails { font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: center; color: #000000; background-color: #FFFFFF; }

.tdErrorText { color: #FF0000; text-align: center; }

.divLogo {  margin: 0px; text-align: left; padding: 0px; }
.divPageTitle { font: 16px PlutoSansDPDLight, Arial, Helvetica, sans-serif; color: #a90034; text-transform: uppercase; }
.imgLogo { border: 0px; }

.divLanguage { width: 400px; text-align: right; margin-bottom: 5px; }
.divMain { width: 400px; padding: 10px; border: #a90034 1px solid; background-color: #FDFDFD; margin-bottom: 20px; }

.tableMain { width: 400px; font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: left; color: #a90034; }
.tdTableMainCol { width: 160px; }
.paddingTop { padding-top: 3px; }
.alignedBottom { vertical-align: bottom; }

.tableMainCountryType { font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: left; color: #7A0807; margin-bottom: 3px; }



.divBlockTitle {}
.divLineBetween { height: 1px; background-color: #a90034; margin-top: 13px; margin-bottom: 13px; }


.tdHelp { text-align: left; font: 10px Arial, Helvetica; color: #666666; }
.pointer { cursor: pointer; }
.deleteButton { cursor: pointer; vertical-align: middle; }
.whiteBg { background-color: #FFFFFF; } */

/* ���� ������� */
/* .tableServicesDetails { font: 13px PlutoSansDPDLight, Arial, Helvetica, sans-serif;  text-align: left; color: #000000; width: calc(100% - 20px); margin: 10px; }
.tdTableServicesDetailsCol1 { width: calc(100% - 60px); }
.tdTableServicesDetailsCol2 { width: 60px; text-align: right; }
.trTableServicesDetailsNotActiveRow { color: #999999; }
.trTableServicesDetailsServiceName { font: 14px PlutoSansDPDLight, Arial, Helvetica, sans-serif; }

.trDetailRow1 { color: #000000; }
.trDetailRow2 { color: #777777; }
.trDetailRow3 { font-weight:bold; color: #000000; }

.trRowListTitle { background-color: #a90034; text-align: center; color: #FFFFFF; }
.trRowList1 { background-color: #e6e7e8; text-align: left; }
.trRowList2 { background-color: #cac4be; text-align: left; }

.selectTakingDate { width: 400px; height: 22px; border: #999999 1px solid; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; }

.selectCountryName { width: 329px; height: 22px; border: #999999 1px solid; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; }

.inputSiteName { width: 253px; height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px 3px 0px 3px; }
.inputSiteNameReadonly { width: 253px; height: 16px; color: #666666; background-color: #F1F1F1; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px 3px 0px 3px; }

.inputCountryName { width: 323px; height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px 0px 0px 3px; }

.inputRegionNameReadonly { width: 393px; height: 16px; color: #666666; background-color: #F1F1F1; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 3px 0px 3px 0px; }

.inputSiteNameSmallReadonly { width: 61px; height: 16px; color: #666666; background-color: #F1F1F1; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px; }

.inputSiteNameSmall { width: 61px; height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px; }

.inputWeight { width: calc(100% - 10px); height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: right; padding: 2px; border: #999999 1px solid; margin-left: 1px; margin-right: 1px; }
.inputWeightReadonly { width: calc(100% - 10px); height: 16px; color: #666666; background-color: #F1F1F1; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: right; padding: 2px; border: #999999 1px solid; margin-left: 1px; margin-right: 1px; }

.inputSum { width: calc(100% - 10px); height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: right; padding: 2px; border: #999999 1px solid; margin: 0px; }
.inputSumDisabled { width: calc(100% - 8px); height: 16px; color: #666666; background-color: #F1F1F1; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px; }

.inputDimension { width: 38px; height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: right; padding: 2px; border: #999999 1px solid; margin: 0px; }

.inputHour { width: 43px; height: 16px; color: #a90034; background-color: #FFFFFF; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: right; padding: 2px; border: #999999 1px solid; margin: 0px; }
.inputHourReadOnly { width: 43px; height: 16px; color: #666666; background-color: #F1F1F1; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: left; padding: 2px; border: #999999 1px solid; margin: 0px; }

.inputButtonCalc, #detailsButtonClose { border: #a90034 2px solid; background-color: #FFFFFF; color: #a90034; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: center; padding: 7px 20px 7px 20px; cursor: pointer; }

a.aDetails { color: #333333; text-decoration: underline; font: 12px PlutoSansDPDLight, Arial, Helvetica; }
a:hover.aDetails { color: #333333; text-decoration: none; }

a.aCalculatedWeight{ color: #a90034; text-decoration: underline; font: 12px PlutoSansDPDLight, Arial, Helvetica; }
a:hover.aCalculatedWeight { color: #333333; text-decoration: underline; }

.divFixedHourText { float: left; margin-top: 3px; }
.divFixedHour { float: right; }


.ulParcelType { margin: 0px 0px 0px 0px; float: left; padding-left: 0px; display: inline; clear: both;  }
.ulParcelType li { width: 200px; list-style: none; display: inline; float: left; text-align: center; margin: 0px 0px 0px 0px; font: 12px PlutoSansDPDLight, Arial, Helvetica; color: #a90034; padding-top: 5px; padding-bottom: 3px; cursor: pointer; }
.ulParcelType li.liActive { width: 198px; padding-top: 4px; padding-bottom: 4px; background-color: #FFFFFF; border: 1px solid #a90034; border-bottom: 0px; margin: 0px 0px 0px 0px; cursor: auto; }
.ulParcelType li.liNotActive { width: 200px;  border: 0px solid #a90034; border-bottom: 1px solid #a90034; margin: 0px 0px 0px 0px; }
.ulParcelType li.liDisabled { width: 200px; background-color: #FFFFFF; border: 0px solid #a90034; margin: 0px 0px 0px 0px; }


a.aHelp { color: #FF3300; text-decoration: none; font: 12px PlutoSansDPDLight, Arial, Helvetica; }
a:hover.aHelp { color:#a90034; }

a.aLang { color: #a90034; text-decoration: none; font: 12px PlutoSansDPDLight, Arial, Helvetica; }
a:hover.aLang { color:#768db4; }

.divParcelTypeContent { width: 398px; border: 1px solid #a90034; border-top: 0px; background-color: #FFFFFF; margin-top: 0px; padding-top: 10px; text-align: center; clear: both; }

.tablePackages { margin: 0px 3px 3px 3px; }
.tdTablePackagesColumn1 { width: 33%; }
.tdTablePackagesColumn2 { width: 34%; }
.tdTablePackagesColumn3 { width: 33%; }

.tablePallets { margin: 2px 3px 3px 3px; }
.trPackagesTitle { font: 12px PlutoSansDPDLight, Arial, Helvetica; text-align: center; background-color: #a90034; color: #FFFFFF; }
.tdTablePalletsColumn1 { width: 20%; } 
.tdTablePalletsColumn2 { width: 46%; }
.tdTablePalletsColumn3 { width: 17%; }
.tdTablePalletsColumn4 { width: 17%; }
.tdTablePalletsColumn5 { width: 18px; } 

.trPackagesInputs { padding: 0px; }
.trPackagesInputs > td { text-align: center; }
.trBaseRow { background-color: #F1F1F1; color: #a90034; text-align: right; }
.trBaseRowForDelete { background-color: #FF0000; color: #FFFFFF; text-align: right; }

.trPalletsAdditional { font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; padding-bottom: 10px; color: #a90034; text-align: left; }

.tablePalletsDetailsCol1 { padding: 2px; vertical-align: top; }
.tablePalletsDetailsCol2 { padding: 2px; vertical-align: top; text-align: left; }
.tablePalletsDetailsCol3 { padding: 2px; vertical-align: top; }
.tablePalletsDetailsCol4 { padding: 2px; vertical-align: top; }
.tablePalletsDetailsCol5 { padding: 0px; vertical-align: top; }

.inputPalletBaseWeight, .selectPalletBaseName, .inputPalletBaseHeight, .inputPalletBaseCount, .inputPalletBaseAddButton {
   border: #666666 1px solid; color: #a90034; font: 12px PlutoSansDPDLight, Arial, Helvetica, sans-serif; text-align: right; background-color: #FFFFFF; padding: 2px; margin: 0px;
}
.inputPalletBaseWeight { width: calc(100% - 6px); height: 16px; }
.selectPalletBaseName { width: 100%; height: 22px; text-align: left; }
.inputPalletBaseHeight { width: calc(100% - 6px); height: 16px; }
.inputPalletBaseCount { width: calc(100% - 6px); height: 16px; }
.inputPalletBaseAddButton { width: 16px; height: 16px; text-align: center; border: #a90034 1px solid; background-color: #e6e7e8; color: #a90034; padding: 0px; cursor: pointer; }			



 */






/*
#dc0032 - DPD Red
#a90034 - Dark Red
#414042 - DPD Black
#cac4be - Warm Grey
#808285 - Mid Grey
#e6e7e8 - Light Grey
*/



@media screen and (max-width: 360px) {
    .divLanguage { width: 350px; }
    .divMain { width: 348px; padding: 5px; border: 0px; background-color: #FFFFFF; }
    .divStatus { width: 358px; }
    .tableMain { width: 340px; }
    .tdTableMainCol { width: 140px; }

    .inputSiteName { width: 204px; }
    .inputSiteNameReadonly { width: 224px; }

    .inputSiteNameSmall { width: 60px; }
    .inputSiteNameSmallReadonly { width: 60px; }

    .inputRegionNameReadonly { width: 342px; }
    .selectTakingDate { width: 348px; }
    .inputCountryName { width: 273px; }

    .ulParcelType { width: 100%; }
    .ulParcelType li { width: 174px; }
    .ulParcelType li.liActive { width: 172px; }
    .ulParcelType li.liNotActive { width: 174px; }
    .ulParcelType li.liDisabled { width: 174px; }

    .divParcelTypeContent { width: calc(100% - 2px); }

    .tdTablePackagesColumn1 { width: 113px; } /* 86 */
    .tdTablePackagesColumn2 { width: 113px; }
    .tdTablePackagesColumn3 { width: 113px; }

    .inputWeight { width: 100px; }
    .inputWeightReadonly { width: 100px; }
    .inputHour { width: 23px; }

    .inputSum { width: 118px; margin: 1px; }
    .inputSumDisabled { width: 118px; margin: 1px; }

    .divFixedHourText { float: left; width: 270px; margin-top: 0px; }
    .divFixedHour { float: left; }

    .inputPalletBaseWeight { width: calc(100% - 6px); }
    .selectPalletBaseName { width: 100%; }
    .inputPalletBaseHeight { width: calc(100% - 6px); }
    .inputPalletBaseCount { width: calc(100% - 6px); }
    .inputPalletBaseAddButton { width: 100%; }

    .divButtons { width: 350px; }
    .divRequestLeft { width: 328px; float: none; padding: 5px; margin-top: 10px; font: 12px; }
    .divRequestRight { width: 328px; float: none; padding: 5px; margin-top: 10px; font: 12px; }
     #errorModalDiv{ left: 7% !important;}
}





@media screen and (max-width: 320px) {
    .divLanguage { width: 310px; }
    .divMain { width: 308px; padding: 5px; border: 0px; background-color: #FFFFFF; }
    .divStatus { width: 318px; }
    .tableMain { width: 300px; }
    .tdTableMainCol { width: 100px; }

    .inputSiteName { width: 164px; }
    .inputSiteNameReadonly { width: 164px; }

    .inputSiteNameSmall { width: 60px; }
    .inputSiteNameSmallReadonly { width: 60px; }

    .inputRegionNameReadonly { width: 302px; }
    .selectTakingDate { width: 308px; }
    .inputCountryName { width: 233px; }

    .ulParcelType { width: 100%; }
    .ulParcelType li { width: 154px; }
    .ulParcelType li.liActive { width: 152px; }
    .ulParcelType li.liNotActive { width: 154px; }
    .ulParcelType li.liDisabled { width: 154px; }

    .divParcelTypeContent { width: calc(100% - 2px); }

    .tdTablePackagesColumn1 { width: 86px; } /* 86 */
    .tdTablePackagesColumn2 { width: 86px; }
    .tdTablePackagesColumn3 { width: 86px; }

    .inputWeight { width: 80px; }
    .inputWeightReadonly { width: 80px; }
    .inputHour { width: 23px; }

    .inputSum { width: 98px; margin: 1px; }
    .inputSumDisabled { width: 98px; margin: 1px; }

    .divFixedHourText { float: left; width: 230px; margin-top: 0px; }
    .divFixedHour { float: left; }

    .inputPalletBaseWeight { width: calc(100% - 6px); }
    .selectPalletBaseName {  }
    .inputPalletBaseHeight { width: calc(100% - 6px); }
    .inputPalletBaseCount { width: calc(100% - 6px); }

    .divButtons { width: 310px; }
    .divRequestLeft { width: 288px; float: none; padding: 5px; margin-top: 10px; font: 12px; }
    .divRequestRight { width: 288px; float: none; padding: 5px; margin-top: 10px; font: 12px; }
    #errorModalDiv{ left: 7% !important;}
}

.calculationDataRow{
    display: flex;
    justify-items: baseline;
    justify-content: space-between;
    padding: 15px 10px;
}
.calculationDataRowItem{
    align-content: end;

}

.trRowList{
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; 
    margin: 10px;
    
}

.serviceRow{
    background-color: var(--DPD-Dark-Red);
    color: #fff;
    padding: 10px 7px;
    height: 30px;
   align-content: center;
   border-radius: 5px 5px 0px 0px;

}

#calculatorDetails{
    background-color: #F1F1F1;
    color: #353434;
    margin: 0 auto;
    width: 22%;
    margin-top: 12%; 
    min-width: 370px;
    border-radius: 10px;
    
}
.fa {
    vertical-align: bottom;
}

#deliveryDeadline{
    color: var(--DPD-Mid-Grey);
}

.tooltip {
    position: relative;
    display: inline-block;
    color: #dc0032;
    border-bottom: 1px dotted #dc0032;
    cursor: pointer;
 }
 
 .tooltip .tooltiptext, .tooltip .tooltiptextRightPanel {
    visibility: hidden;
    width: 260px;
    background-color: #414042;
    color: #FFFFFF;
    text-align: left;
    padding: 5px;
    font-weight: normal;

    /* Position the tooltip  */
    position: absolute;
    z-index: 1;
}

 .tooltip .tooltiptext {
    transform:translate(-35%, -100%);
 }

 #tooltipReturnReceipt .tooltiptext {
    transform:translate(-85%, -100%);
 }

 .tooltip .tooltiptextRightPanel {
    transform:translate(-90%, -100%);
}

 .tooltip:hover .tooltiptext, .tooltip:hover .tooltiptextRightPanel {
   visibility: visible;
 }

 .deleteButton{
    background-image: url("../images/iconDelete.png");
    background-repeat: no-repeat;
    border: 0;
 }

 .parcelTypeTab{
    display: none;
  }
  .parcelTypeTab.activeTab{
    display: flex !important;
  }

   /* #errorModalDivWrapper{
    text-align: center;
    background: rgba(0,0,0,0.4);
    position: absolute;
    width: 100%;
    height: 120%;
    top: 1px;
    left: 2px;
    right: 5px;
	opacity: 1;
   } */

  #errorModalTittle{
    
    padding: 2px;
    background-color: #a90034;
    
  }
  #errorModalDiv{
    text-align: end;
    box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
    background: rgba(255, 255, 255);
    position: absolute;
    width: 300px;
    height: auto;
    top: 25%;
    left: 42%;
	opacity: 1;
    margin:  0 auto;
    border-radius: 5px;
    border: solid 1px  #a90034;
    display: none;
  }

  #errorModalDiv p{
    /* margin-top: 10%; */
    color: #a90034;
    text-align: center;
    padding: 20px;
    
  }
  #errorModalDivCloseBtn{
    cursor: pointer;
    border: none;
    padding: 5px;
    background-color: inherit;
    color: #fff;
  }

  #detailsFinalPriceTd{
    vertical-align: top;
  }











/* ------------------------------ ���� ------------------------------  */
: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;
   --SectionFirstColumnWidth: 90px;
}

.divAdditionalServicesRow {
    width: 108px;
    text-align: center;
}

.displayNone {
    display: none;
}

.left { text-align: left; }
.hideForResponsive { display: block; }

/* Input ������ */
.formInput {
    padding: 5px 5px;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 3px;
    font: 12px PlutoSansDPDLight, Arial, Helvetica;
}
.formInput:focus {
    color: #495057;
    background-color: #fffbeb;
    border-color: #cac4be;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(202, 196, 190, 0.6);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(202, 196, 190, 0.6);
}
.inputParcelsCount, .inputWeight { width: calc(100% - 22px); margin: 0px 5px; }
.inputSize { width: calc(((100% - 60px)/3) - 12px); min-width: 20px; }
.inputSizePallet { width: calc(((100% - 40px)/3) - 12px); min-width: 20px; }
.selectTakingDate { width: 100% }
.selectBaseName { 
    width: 100%; 
    /* margin-bottom: 5px;  */
}
.inputBaseNameInfo { width: 188px; /* 200 - 12 */ }
.divDimSeparator { width: 20px; display: inline-block; text-align: center; }

/* ����� �� ������� (����. ����, ��������� ����� [��], ...) */
.divInputLabelName {}
.divInputLabelNameTotal {
    display: none; /* ������� �� �������� ���� ����� ������ � �� �������� ��� ��������� */
}



/* ��������� �� �������� */
.divParamsRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 10px;
}
.divParamsLeftColumn { width: calc(var(--SectionFirstColumnWidth) - 10px); padding-right: 10px; text-align: right; }
.divParamsDate, .divParamsRadioButtonsContainer { width: calc(100% - var(--SectionFirstColumnWidth)); }
.divParamsCheckboxesContainer { width: calc(100% - var(--SectionFirstColumnWidth)); display: flex; align-items: center; }
.selectParamsDate { width: calc(100% - 12px); }

@media screen and (max-width: 720px) {
    .divParamsRow {
        display: flex;
        flex-direction: column;
    }
    .divParamsLeftColumn { width: 100%; padding: 0px; text-align: left; }
    .divParamsDate { width: 100%; }
    .divParamsRadioButtonsContainer { width: 100%; }
    .divParamsCheckboxesContainer { width: 100%; }

}


/* ------------------------------ CHECKBOXES � RADIO BUTTONS ------------------------------  */
input {
    appearance: none;
}
select{
    height: 27px;
}
#fragile, #returnReceipt, #documents, #detailedParcels, #dropoffOffice, #pickupOffice {
    border: 1px solid #ced4da;
    border-radius: 3px;
    width: 20px;
    height: 20px;
    vertical-align: -6px;
    position: relative;
}
#fragile::before, #returnReceipt::before, #documents::before, #detailedParcels::before, #dropoffOffice::before, #pickupOffice::before {
    content: "\2713"; /* unicode-table.com */
    font-weight: bold;
    /*content: '?';*/
    color: #495057;
    visibility: hidden;
    position: absolute;
    top: 0px;
    right: 4px;
}
#fragile:checked::before, #returnReceipt:checked::before, #documents:checked::before, #detailedParcels:checked::before, #dropoffOffice:checked::before, #pickupOffice:checked::before {
    visibility: visible;
}

#parcelTypePackage, #parcelTypePallet, #parcelTypeTyres {
    border: 1px solid #ced4da;
    border-radius: 20px;
    width: 20px;
    height: 20px;
    vertical-align: -5px;
    position: relative;
}
#parcelTypePackage::before, #parcelTypePallet::before, #parcelTypeTyres::before {
    content: "\2022"; /* unicode-table.com */
    font-size: 40px;
    color: var(--DPD-Mid-Grey);
    position: absolute;
    visibility: hidden;
    top: -13px;
    right: 2px;
}
#parcelTypePackage:checked::before, #parcelTypePallet:checked::before, #parcelTypeTyres:checked::before  {
    visibility: visible;
}


/* ------------------------------ ������� � ��������� ------------------------------  */
.divParticipantRow {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 5px;
}
.divParticipantLeftColumn { width: calc(var(--SectionFirstColumnWidth) - 10px); padding-right: 10px; text-align: right; }

/* ������� */
.divParticipantCountry { width: calc(100% - var(--SectionFirstColumnWidth)); }
.inputParticipantCountry { width: calc(100% - 12px); }

/* �������� ����� */
.divParticipantSiteContainer { width: 290px; }
.inputParticipantSiteType { width: 38px; }
.inputParticipantSiteName { width: calc(100% - 12px - 10px - 38px - 12px); margin-left: 10px; }

/* �������� ��� */
.divParticipantPostCodeContainer { width: auto; margin-left: 10px; display: flex; align-items: center; }
.divPostCode {}
.inputParticipantPostCode { width: 62px; margin-left: 10px; }

/* ��������� �� ����, �� ��������� � ����  */
.divParticipantOfficeCheckboxContainer { width: auto; margin-left: 5px; display: flex; align-items: center; }

/* ������������ ���������� */
.divParticipantAddInfoContainer { width: calc(100% - var(--SectionFirstColumnWidth)); }
.inputParticipantAddInfo { width: calc(100% - 12px); }


@media screen and (max-width: 720px) {
    /* ------------------------------ ������� � ��������� ------------------------------  */
    .divParticipantRow {
        display: flex;
        flex-direction: column;
    }
    .divParticipantLeftColumn { width: 100%; padding: 0px; text-align: left; }

    /* ������� */
    .divParticipantCountry { width: 100%; }

    /* �������� ����� */
    .divParticipantSiteContainer { width: 100%; margin-bottom: 10px; }

    /* �������� ��� */
    .divParticipantPostCodeContainer { width: 100%; margin-left: 0px; margin-bottom: 10px; flex-direction: column; }
    .divPostCode { width: 100%; text-align: left; }
    .inputParticipantPostCode { width: calc(100% - 12px); margin: 0px; }

    /* ��������� �� ����, �� ��������� � ����  */
    .divParticipantOfficeCheckboxContainer { width: 100%; margin: 0px; }

    /* ������������ ���������� */
    .divParticipantAddInfoContainer { width: 100%; }
}




/* ------------------------------ ������ � ���� ------------------------------  */
/* ������ �� ����� � ������ �� ������ */
.divParcelRow, .divParcelRowTotal, .divPalletRow, .divPalletRowTotal, .divTyreRow, .divTyreRowTotal {
    width: 100%;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* ������ �������� �� �� ���� ��� � �� �� �������� */
    align-items: end; /* ���������� �� ���� (�� ��������) */
}
.divParcelRowTotal, .divPalletRowTotal, .divTyreRowTotal {
    align-items: center;
}

/* ��� �� ����� �� �������� �� ����� */
.divParcelRowAddButton, .divPalletRowAddButton, .divTyreRowAddButton {
    width: auto;
    padding: 0px 0px 0px var(--SectionFirstColumnWidth);
    margin-bottom: 10px;
}

/* ������ �� ������ */
.divParcelColFirstLabel, .divPalletColFirstLabel, .divTyreColFirstLabel {
    text-align: right; margin-bottom: 0px;
}
.divParcelColCount, .divParcelColX, .divParcelColPhysicalWeight, .divParcelColDimensions, .divParcelColVolumeWeight, .divParcelColTariffWeight, .divParcelColDelButton,
.divPalletColCount, .divPalletColX, .divPalletColPhysicalWeight, .divPalletColDimensions, .divPalletColVolumeWeight, .divPalletColTariffWeight, .divPalletColDelButton, .divPalletBase, .divPalletDetails,
.divTyreColCount, .divTyreColX, .divTyreColPhysicalWeight, .divTyreColDimensions, .divTyreColDelButton {
    text-align: center; margin-bottom: 0px;
}
.divParcelColFirstLabel, .divPalletColFirstLabel, .divTyreColFirstLabel { width: calc(var(--SectionFirstColumnWidth) - 10px); padding-right: 10px; text-align: right; }
.divParcelColCount, .divPalletColCount, .divTyreColCount { width: 80px; }
.divParcelColX, .divPalletColX, .divTyreColX { width: 30px; }
.divPalletColPhysicalWeight{ width: 130px; }
.divParcelColPhysicalWeight, .divTyreColPhysicalWeight { width: 140px; }
.divParcelColDimensions, .divPalletColDimensions, .divTyreColDimensions { width: 180px; min-width: 180px; }
.divPalletColBaseName {width: 228px; min-width: 228px; text-align: center;}
.divParcelColVolumeWeight, .divPalletColVolumeWeight { width: 130px; }
.divParcelColTariffWeight, .divPalletColTariffWeight { width: 130px; }
.divParcelColDelButton, .divPalletColDelButton, .divTyreColDelButton { width: 30px; }

.divPalletBase { width: 440px; }
.spanPalletBaseSizesText {}
.spanPalletBaseNameText { display: none; } /* ���� ��� �� ������� �������/����������� ��� ��������� */
.divPalletDetails {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.divPalletInfo { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; }
.divPalletSizesText { display: none; }
.divPalletSizes { width: 100%; }

/* ����� �� ��������� �� ��� */
.divDeleteParcelBtn, .divDeletePalletBtn, .divDeleteTyreBtn {}
.deleteParcelBtn, .deletePalletBtn, .deleteTyreBtn {
    color: #fff;
    background-color: #a90034;
    border: solid 1px #a90034;
    text-align: center;
    border-radius: 3px;
    font: 12px PlutoSansDPDRegular, Arial, Helvetica;
    padding: 5px 0px;
    width: calc(100% - 2px);
    cursor: pointer;
}





@media screen and (max-width: 720px) {
    /* ------------------------------ ���� �� ������, ������ � ���� ------------------------------  */
    /* ����� �� ������� (����. ����, ��������� ����� [��], ...) */
    .divInputLabelName, .divInputLabelNameTotal {
        display: block;
    }
    /* Input ������ */
    .inputParcelsCount, .inputWeight, .selectBaseName {
        width: calc(100% - 12px); margin: 0px;
    }
    .inputSize {
        width: calc(((100% - 40px)/3) - 12px)
    }
    .hideForResponsive { display: none; }


    /* ------------------------------ ������ � ���� ------------------------------  */
    /* ������ �� ����� � ������ �� ������ */
    .divParcelRow, .divParcelRowTotal, .divPalletRow, .divPalletRowTotal, .divTyreRow, .divTyreRowTotal {
        flex-direction: column;
        padding-bottom: 0px;
    }

    /* ��� �� ����� �� �������� �� ����� */
    .divParcelRowAddButton, .divPalletRowAddButton, .divTyreRowAddButton {
        padding: 0px;
    }

    /* ������ �� ������ */
    .divParcelColCount, .divParcelColX, .divParcelColPhysicalWeight, .divParcelColDimensions, .divParcelColVolumeWeight, .divParcelColTariffWeight,
    .divPalletColCount, .divPalletColX, .divPalletColPhysicalWeight, .divPalletColDimensions, .divPalletColVolumeWeight, .divPalletColTariffWeight,
    .divTyreColCount, .divTyreColX, .divTyreColPhysicalWeight, .divTyreColDimensions, .divPalletColBaseName {
       text-align: left;
       width: 100%;
       margin-bottom: 15px;
    }
    .divParcelColDelButton, .divPalletColDelButton, .divTyreColDelButton {
       text-align: left;
       width: 100%;
       margin-bottom: 0px;
    }
    .divParcelColFirstLabel, .divParcelColX, .divPalletColFirstLabel, .divPalletColX, .divTyreColFirstLabel, .divTyreColX {
        display: none;
    }

    .divPalletBase {
        width: 100%;
        text-align: left;
    }
    .selectBaseName { margin-bottom: 10px; }
    .spanPalletBaseSizesText { } /* ���� ��� (� �������) �� ������� �������/����������� ��� ��������� */
    .spanPalletBaseNameText { display: inline-block; }
    .divPalletDetails {
        flex-direction: column;
        margin-bottom: 10px;
    }
    .divPalletSizesText { width: 100%; display: block; text-align: left; }

    /* ����� �� ��������� �� ��� */
    .divDeleteParcelBtn, .divDeletePalletBtn, .divDeleteTyreBtn {
        height: 0px;
    }
    .deleteParcelBtn, .deletePalletBtn, .deleteTyrelBtn {
        width: 100%;
    }
}




/* ------------------------------ ������������ ������ ------------------------------  */
.divSectionTitle {
    width: 100%;
    text-align: center;
}
.divAdditionalServicesAll {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap; /* ������ �������� �� �� ���� ��� � �� �� �������� */
    align-items: end; /* ���������� �� �� ������� ����� */
    gap: 10px; /* ������ ���������� ����� ����������, �� �� � ���-����� � ���-����� */
}
.divAdditionalService {
    width: 25%;
    text-align: center;
    min-width: 80px;
}
.inputSum {
    width: 50%;
    text-align: right;
}


@media screen and (max-width: 720px) {
    /* ------------------------------ ������������ ������ ------------------------------  */
    .inputSum {
        width: calc(90% - 12px);
    }

    .divAdditionalServicesAll {
        justify-content: space-evenly;
        margin-top: 10px;
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap; /* ������ �������� �� �� ���� ��� � �� �� �������� */
        align-items: end; /* ���������� �� �� ������� ����� */
        gap: 42px; /* ������ ���������� ����� ����������, �� �� � ���-����� � ���-����� */
    }
}