.thereIsNoUseForThisClassInCSS-itIsOnlyNeededInOrderToSuccessfullyCompileLessFileInVSWithWebEssentialsExtension{

}

// Однострочные комментарии не входят в скомпилированный код
// Переменные можно объявлять даже после их использования. Переменные могут содержать в названии "-"
// ~ перед строкой заставляет ее выводиться без кавычек
// Обозначения в коде: 
//  - переменные, начинающиеся с "_p-", имеют область действия только внутри region
//  - переменные, начинающиеся с "_", могут быть использованы только внутри файла less
//  - переменные, начинающиеся с букв, должны быть переопределены внешним скриптом

// (должны быть переопределены в JS функцией less.modifyVars({'@varname': value, ...});)

@deviceOrientation: "landscape";

@deviceViewportWidth: 0px;
@deviceViewportHeight: 0px;



// @media
// TODO портрет и ландшафт нужно поменять местами. Они так стоят исключительно в отладочных целях
// То есть у портрета 1/1 - максимальное соотношение сторон
@_mediaPortrait: ~'all and (max-device-aspect-ratio: 1/1)';
@_mediaLandscape: ~'all and (min-device-aspect-ratio: 1/1)';

// 1/100
@_deviceViewportWidthOnePercent: @deviceViewportWidth / 100;
@_deviceViewportHeightOnePercent: @deviceViewportHeight / 100;



// Размер шрифта в зависимости от ширины
// Remark: то, что формулы почти совпадают - нормально и не является ошибкой
@_p-fontSizeRelativeToDeviceViewportWidth: round(1pt * @deviceViewportWidth / 19) / 2;
@_p-fontSizeRelativeToDeviceViewportHeightLandscape: round(1pt * @deviceViewportHeight / 19) / 2;
@_p-fontSizeRelativeToDeviceViewportWidthLandscape: round(1pt * @deviceViewportWidth / 19) / 2 * 0.6;

@_fontSizePortrait: @_p-fontSizeRelativeToDeviceViewportWidth;
@_fontSizeLandscape: @_p-fontSizeRelativeToDeviceViewportHeightLandscape;
@_fontSizeLandscapeFromWidth: @_p-fontSizeRelativeToDeviceViewportWidthLandscape;



@_headerHeightPortrait: 16px * @_deviceViewportWidthOnePercent;
@_headerHeightLandscape: 14px * @_deviceViewportHeightOnePercent;

@_scrollWidth: 20px;




// Guard, устанавливающий ориентацию
.landscapePortraitOrientator(@deviceOrientation);

.centerContainer {
    width: 100%; /* Firefox needs this */
        
    height: 100%; /* Height can be anything */
        
    /* WebKit (Chrome & Safari) */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    
    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;
    
    /* IE */
    display: -ms-box;
    -ms-box-pack: center;
    -ms-box-align: center;
    
     /* Native CSS */
    display: box;
    box-pack: center;
    box-align: center;
}

.marginLR {
    margin-left: 3%;
    margin-right: 3%;
}

.flippedVerticalImage {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

.pagerButtonsLastAndFirst {
    width: 10%;
    // тут необходим 1px, потому что возможность задавать в процентах не подходит, а при 0 не работает отступ
    height: 1px;
}

.headerMain .headerLeftItem {
    height: 100%;
    float: left;
    margin-right: 1%;
}

.headerMain .headerTitle {
    line-height: 200%;
    float: right;
    margin-left: 1%;
    font-size: 120%;
}

.headerMain .headerRightItem {
    float: right;
    margin-left: 1%;
}

.onlineDataListElementMain .oDataContainer {
    width: 33%;
    height: 100%;
    float: left; 
}

.onlineDataListElementMain .oDataImage {
    height: 100%; 
    margin-right: 4%;
    float: left; 
}

.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.bordered {
    .borderBox;
    border-width: 2px;
    border-style: solid;
}

.borderBox {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

.test1{
     height:99.5%;
}
.test2{
    height:100%;
}

div {
    margin: 0;
    padding: 0;
}

img {
    margin: 0;
    padding: 0;
}

.text-overflow-trunc-with-dotdotdot {
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.zeroLeftRightAbsolute{
    position: absolute;
    left: 0;
    right: 0;
}

.zeroTopLeftRightAbsolute {
    .zeroLeftRightAbsolute;
    top: 0;
}

.zeroBottomLeftRightAbsolute {
    .zeroLeftRightAbsolute;
    bottom: 0;
}

.zeroTopBottomLeftRightAbsolute {
    .zeroTopLeftRightAbsolute;
    bottom: 0;
}



.defaultDisabledButton {
    .bgReallyDarkGray;
    .textColorLittleDarkGray;
    border: none;
    font-size: 100%;
}

.defaultNormalButton {
    .bgColorLikeDarkCyan;
    .text-color-white;
    border: none;
    font-size: 100%;
}

.moveToFirstLastButton {
    .text-color-white;
    font-size: 150%;
    background-color: #7aab36;
}

.moveToNextPreviousButton {
    .text-color-white;
    .bgColorLikeDarkCyan;
    font-size: 150%;
}

.moveToNextPreviousFirstLastDisabledButton {
    .bgReallyDarkGray;
    .textColorLittleDarkGray;
    font-size: 150%;
}

.onlineDataListItemButtonNormal {
    .bgColorLikeDarkCyan;
    font-size: 70%;
}

.onlineDataListItemButtonDisabled {
    .bgReallyDarkGray;
    .textColorLittleDarkGray;
    font-size: 70%;
}

.emailsSelectionDeleteButtonNormal {
    background-color: #E51955;
}

.unitCardGoToMapButton {
    background-color: #E50050;
}

.unitCardGoToTrackButton {
    .bgColorLikeDarkCyan;
}

.unitCardGoToReportButton {
    .bgColorGreen;
}


/*#region Colors */

.background-white {
    background-color: white;
}

.balckAndWhite{
    color: white; 
    background-color: black;
}

.bgReallyDarkGray {
    background-color: #333333;
}

.bgColorDarkGray {
    background-color: #5b5b5b;
}

.borderColorLittleDarkGray {
    border-color: #666666;
}

.textColorLittleDarkGray {
    color: #666666;
}

.bgColorLikeDarkCyan {
    background-color: #008AD2;
}

.borderColorGreen {
    border-color: #78AB2D;
}

.bgColorGreen {
    background-color: #78AB2D;
}

.textColorGreen {
    color: #78AB2D;
}

.borderColorWhite {
    border-color: #FFFFFF;
}

.text-color-white {
    color: #FFFFFF;
}

.k-border-color-blue
{
    border-color: #008dd2 !important;
}

.k-bg-color-blue
{
    background-color: #008dd2 !important;
}

.k-color-blue
{
    color: #12ade5 !important;
}

.k-color-orange{
    color:#f07c00
}
.background-black {
    background-color: black;
}

.background-transparent {
    background-color: transparent;
}

.footerVisible {
    display: inherit;
}

.footerHidden {
    display: none;
}

.selectedSign {
    .text-overflow-trunc-with-dotdotdot;
    border: 1px solid black;
    background-color: #ffc003;
    width: 70px;
    margin-left: -35px;
    text-align: center;
}

.unselectedSign {
    .text-overflow-trunc-with-dotdotdot;
    border: 1px solid black;
    background-color: white;
    width: 70px;
    margin-left: -35px;
    text-align: center;
}

.imgClass {
    height: 25px;
    width: 32px;
    margin-left: -16px;
    margin-top: -12px;
}

.imginMoveClass {
    height: 48px;
    width: 25px;
    margin-left: -12px;
    margin-top: -24px;
}


.landscapePortraitOrientator(@orientation) when ("@{orientation}" = "portrait"){
    
    @p_headerHeight:@_headerHeightPortrait;
    @p_footerHeight:20px * @_deviceViewportWidthOnePercent;

    .odHeader{
        .zeroTopLeftRightAbsolute;
        height:@p_headerHeight;
    }

    .odMap{
        .zeroLeftRightAbsolute;
        top:@p_headerHeight;
        bottom:@p_footerHeight;
    }

    .odFullMap{
        .zeroBottomLeftRightAbsolute;
        top:@p_headerHeight;
    }

    .odFooter{
        .zeroBottomLeftRightAbsolute;
        height: @p_footerHeight;
    }

    .headerTop {
        top:@p_headerHeight;
    }

    .title {
        height:@p_headerHeight;
        margin: 1% 3% 1% 3%;
        font-size: 250%
    }

    .titleTop {
        top:@p_headerHeight;
    }

    .searchPlaceholder {
        height:@p_headerHeight;
    }

    .searchPlaceholderTop {
        top:@p_headerHeight;
    }

    .infoMainDiv .contentDiv{
        top: @p_headerHeight;
    }

    .infoMainDiv .innerContent{
        margin-left: 15.2%;
        margin-right: 15.2%;
    }

    .wizardMainDiv .contentDivWithFooter {
        top: @p_headerHeight;
        bottom: 0.75px * @_headerHeightPortrait;
        overflow-y: auto;
    }

    .wizardMainDiv .wizardButton {
        border: #00bdf4 thin solid;
        margin-top: 3.33%;
        padding: 3.4% 9.5% 2.2% 9.5%;
        font-size: 200%;
        position: relative;
        height: 7px * @_deviceViewportWidthOnePercent;
    }

    .wizardMainDiv .footerDiv {
        height: 0.75px * @_headerHeightPortrait;
    }

    .wizardMainDiv .periodButtonAlreadySelected {
        font-size: 65%;
    }

    .groupingSelectionContainer {
        position: fixed;
        top: 1.2px * @_headerHeightPortrait;
        left: 3px * @_deviceViewportWidthOnePercent;
        width: 60px * @_deviceViewportWidthOnePercent;
    }

    .popupCss {
        .unselectable;
        top: 1.1px * @p_headerHeight;
        min-width: 43.2px * @_deviceViewportWidthOnePercent;
        right: 3px * @_deviceViewportWidthOnePercent;
    }

    .popupContentCss {
        float: left;
    }

    .groupListInPopup {
        .background-white;
        white-space: nowrap;
        padding: 1% 5% 1% 5%;
        font-size: 130%;
        display: inline-block;
    }

    .groupListElement {
        margin-top: 3.33%;
        margin-bottom: 3.33%;
        cursor: pointer;
    }

    .headerGroupingButton {
        width: 0.8034px * @p_headerHeight;
    }
}

.landscapePortraitOrientator(@orientation) when ("@{orientation}" = "landscape"){
    @p_headerHeight:@_headerHeightLandscape;
    @p_footerHeight:20px * @_deviceViewportHeightOnePercent;

    .odHeader{
        .zeroTopLeftRightAbsolute;
        height:@p_headerHeight;
    }

    .odMap{
        .zeroLeftRightAbsolute;
        top:@p_headerHeight;
        bottom:@p_footerHeight;
    }

    .odFullMap{
        .zeroBottomLeftRightAbsolute;
        top:@p_headerHeight;
    }

    .odFooter{
        .zeroBottomLeftRightAbsolute;
        height: @p_footerHeight;
    }

    .headerTop {
        top:@p_headerHeight;
    }

    .title {
        height:@p_headerHeight;
        margin: 1% 3% 1% 3%;
        font-size: 250%
    }

    .titleTop {
        top:@p_headerHeight;
    }

    .searchPlaceholder {
        height:@p_headerHeight;
    }

    .searchPlaceholderTop {
        top:@p_headerHeight;
    }

    .infoMainDiv .contentDiv{
        top: @p_headerHeight;
    }

    .infoMainDiv .innerContent{
        @p_width: 69.6px * @_deviceViewportHeightOnePercent;
        @p_marginlr: (@deviceViewportWidth - @p_width) / 2;

        margin-left: @p_marginlr;
        margin-right: @p_marginlr;
    }

    .wizardMainDiv .contentDivWithFooter {
        top: @p_headerHeight;
        bottom: 0.75px * @_headerHeightLandscape;
        overflow-y: auto;
    }

    .wizardMainDiv .wizardButton
    {
        border: #00bdf4 thin solid;
        margin-top: 3.33px * @_deviceViewportHeightOnePercent;
        padding: 3.4px * @_deviceViewportHeightOnePercent 9.5px * @_deviceViewportHeightOnePercent 2.2px * @_deviceViewportHeightOnePercent 9.5px * @_deviceViewportHeightOnePercent;
        font-size: 200%;
        position: relative;
        height: 7px * @_deviceViewportHeightOnePercent;
    }

    .wizardMainDiv .footerDiv {
        height: 0.75px * @_headerHeightLandscape;
    }

    .wizardMainDiv .periodButtonAlreadySelected {
        font-size: 65%;
    }

    .groupingSelectionContainer {
        position: fixed;
        top: 1.2px * @_headerHeightLandscape;
        left: 3px * @_deviceViewportHeightOnePercent;
        width: 60px * @_deviceViewportHeightOnePercent;
    }

    .popupCss {
        .unselectable;
        top: 1.1px * @p_headerHeight;
        min-width: 43.2px * @_deviceViewportWidthOnePercent;
        right: 3px * @_deviceViewportHeightOnePercent;
    }

    .popupContentCss {
        float: left;
    }

    .groupListInPopup {
        .background-white;
        white-space: nowrap;
        padding: 1% 5% 1% 5%;
        font-size: 130%;
        display: inline-block;
    }

    .groupListElement {
        margin-top: 3.33%;
        margin-bottom: 3.33%;
        cursor: pointer;
    }

    .headerGroupingButton {
        width: 0.8034px * @p_headerHeight;
    }
}

.landscapePortraitOrientator(@orientation) when ("@{orientation}" = "portrait")
{
    .loginDivMain {
        width:@deviceViewportWidth;
        height:@deviceViewportHeight;
    }

    .loginDiv{
        margin-top: 4.5px * @_deviceViewportWidthOnePercent;
        width: 81%;
        height: 86.38px * @_deviceViewportWidthOnePercent;
    }
}

.landscapePortraitOrientator(@orientation) when ("@{orientation}" = "landscape"){
    
    .loginDivMain {
        width:@deviceViewportWidth;
        height:@deviceViewportHeight;
    }

    .loginDiv{
        margin-top: 4.5px * @_deviceViewportHeightOnePercent;
        width: 81px * @_deviceViewportHeightOnePercent;
        height:86.38px * @_deviceViewportHeightOnePercent;
    }
}

.landscapePortraitOrientator(@orientation) when ("@{orientation}" = "portrait") {

    @p_listItemHeight: 18.5px * @_deviceViewportWidthOnePercent;

    body {
        font-size: @_fontSizePortrait;
    }

    .headerViewContainer {
        height: @_headerHeightPortrait;
    }

    .logoutB,
    .mapB,
    .onlineDataB,
    .reportB,
    .infoB,
    .trackB {
        height: 100%;
        color: white;
    }

    .tileContainer {
        margin-top: 12.5%;
        margin-left: 13%;
    }

    .menuTilesContainer {
        .zeroTopLeftRightAbsolute;
        overflow-y: auto;
        height: 100px * @_deviceViewportHeightOnePercent;
    }

        .menuTilesContainer img {
            width: 100%;
        }

    .tile {
        width: floor(35.6px * @_deviceViewportWidthOnePercent);
        height: floor(35.6px * @_deviceViewportWidthOnePercent);
        margin-right: 3px * @_deviceViewportWidthOnePercent;
        margin-bottom: 3px * @_deviceViewportWidthOnePercent;
        display: block;
        float: left;
    }

        .tile.double {
            width: floor(74.2px * @_deviceViewportWidthOnePercent);
        }

        .tile.mini {
            width: floor(19.9px * @_deviceViewportWidthOnePercent);
            height: floor(19.9px * @_deviceViewportWidthOnePercent);
        }

    .logoutB {
        background-color: #008bc0;
    }

    .mapB {
        background-color: #e51955;
    }

    .onlineDataB {
        background-color: #ea871b;
    }

    .reportB {
        background-color: #7aab36;
    }

    .infoB {
        background-color: #4d4d4d;
    }

    .trackB {
        background-color: #fcc300;
    }

    /*#endregion*/

    /*#region Track*/

    .unitListItemChecked::before {
        @_p-bordersSize: 8.9px * @_deviceViewportWidthOnePercent;
        width: 0;
        height: 0;
        border-top: @_p-bordersSize solid;
        border-top-color: inherit;
        border-left: @_p-bordersSize solid transparent;
        position: absolute;
        display: block;
        right: 0;
        content: "";
        top: 0;
    }

    .unitListItemChecked::after {
        position: absolute;
        content: "";
        background: transparent url("../../../../Content/vector/select.svg") no-repeat;
        background-position: 0px, 0px;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        -webkit-background-size: 100%;
        background-size: 100%;
        display: block;
        top: 1px * @_deviceViewportWidthOnePercent;
        right: 1.2px * @_deviceViewportWidthOnePercent;
        width: 3px * @_deviceViewportWidthOnePercent;
        height: 3px * @_deviceViewportWidthOnePercent;
    }

    .simpleListItemChecked::before {
        @_p-bordersSize: 8.9px * @_deviceViewportWidthOnePercent;
        width: 0;
        height: 0;
        border-top: @_p-bordersSize solid;
        border-top-color: inherit;
        border-left: @_p-bordersSize solid transparent;
        position: absolute;
        display: block;
        right: 0;
        content: "";
        top: 0;
    }

    .simpleListItemChecked::after {
        position: absolute;
        content: "";
        background: transparent url("../../../../Content/vector/select.svg") no-repeat;
        background-position: 0px, 0px;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        -webkit-background-size: 100%;
        background-size: 100%;
        display: block;
        top: 1px * @_deviceViewportWidthOnePercent;
        right: 1.2px * @_deviceViewportWidthOnePercent;
        width: 3px * @_deviceViewportWidthOnePercent;
        height: 3px * @_deviceViewportWidthOnePercent;
    }

    .bottomMarginDiv {
        height: 3px * @_deviceViewportWidthOnePercent;
    }

    .moveToLastPreviousButtonsContainer{
        height: 9px * @_deviceViewportWidthOnePercent;
    }

    .moveToFirstNextButtonsContainer {
        margin-top: 3%;
        height: 9px * @_deviceViewportWidthOnePercent;
    }

    .moveToFirstOrLastButtonContainer {
        width: 39.4%;
    }

    .moveToNextOrPreviousButtonContainer {
        width: 43.2%;
    }

    .pageNumberAndPagesCountContainer {
        width: 17%;
    }

    .dataListMainDiv .contentDiv {
        top: @_headerHeightPortrait;
        overflow-y: auto;
    }

    .dataListMainDiv .footerDiv {
        height: 0.75px * @_headerHeightPortrait;
    }

    .dataListMainDiv .contentDivWithFooter {
        top: @_headerHeightPortrait;
        bottom: 0.75px * @_headerHeightPortrait;
        overflow-y: auto;
    }

    .dataListMainDiv .listItemWithText {
        height: 12px * @_deviceViewportWidthOnePercent;
        margin-bottom: 3.33%;
        margin-top: 3.33%;
        position: relative;
    }

    .dataListMainDiv .listOfUnitsItem {
        margin-bottom: 3.33%;
        margin-top: 3.33%;
        height: @p_listItemHeight;
    }

    .groupCollapsed
    {
        margin-bottom: 3.33%;
        margin-top: 3.33%;
        height: @p_listItemHeight;
    }

    .groupExpanded
    {
        margin-bottom: 3.33%;
        margin-top: 3.33%;
        height: 0.5px * @p_listItemHeight;
    }

    .groupElementMain .groupImage{
        top: 0.053px * @p_listItemHeight;
        left: 0.173px * @p_listItemHeight;
    }

    .groupElementMain .groupContainer{
        width: 0.517px * @p_listItemHeight;
    }

    .groupElementMain .arrowImage{
        bottom: 0.138px * @p_listItemHeight;
    }

    .groupElementMain .arrowContainer{
        width: 0.322px * @p_listItemHeight;
    }

    .trackPeriodMainDiv {
        margin-top: @_headerHeightPortrait + 5.4px * @_deviceViewportWidthOnePercent;
    }

        .trackPeriodMainDiv .beginDateTimeContainer {
            width: 93px * @_deviceViewportWidthOnePercent;
            height: 9.6px * @_deviceViewportWidthOnePercent;
            margin-top: 8.5px * @_deviceViewportWidthOnePercent;
        }

        .trackPeriodMainDiv .endDateTimeContainer {
            width: 93px * @_deviceViewportWidthOnePercent;
            height: 9.6px * @_deviceViewportWidthOnePercent;
            margin-top: 10px * @_deviceViewportWidthOnePercent;
        }

        .trackPeriodMainDiv .nextStepButton{
            height: 9.5px * @_deviceViewportWidthOnePercent;
        }

        


    @p_headerHeight: @_headerHeightPortrait;
    @p_footerHeight:40px * @_deviceViewportWidthOnePercent;
    @p_mapHeight:@deviceViewportHeight - @p_headerHeight - @p_footerHeight;
    @p_footerTopOffset :@deviceViewportHeight - @p_footerHeight;

    .p_track_common{
        position:absolute;
        left:0;
        right:0;
        width: @deviceViewportWidth;
    }

    .p_footerTopBottom{
        top: @p_footerTopOffset;
        bottom:0;
        height:@p_footerHeight;
    }

    .trackHeader{
        .p_track_common;
        top: 0;
        bottom: @deviceViewportHeight - @p_headerHeight;
        height: @p_headerHeight;
    }

    .trackMap{
        .p_track_common;
        top: @p_headerHeight;
        bottom: @p_footerHeight;
        height: @p_mapHeight;
    }

    .trackFooter{
        .p_track_common;
        .p_footerTopBottom;
    }

    .parkingFooter{
        .p_track_common;
        .p_footerTopBottom;
    }

    @p_imgSize:32px;

    .imgParkingClass{
        float:left;
        height:@p_imgSize;
        width:@p_imgSize;
        margin-top:-@p_imgSize;
    }

    .parkingSign{
        font-size:130%;
        .text-overflow-trunc-with-dotdotdot;
        text-align: center;
        color:white;
        width:@p_imgSize;
        margin-top:-@p_imgSize + 3px;
        position:absolute;
    }



    .unitCardMainDiv .contentDiv {
        top: @_headerHeightPortrait;
        overflow-y: auto;
    }

    .unitCardMainDiv .firstColumn {
        font-size: 90%;
        vertical-align: top;
        padding-top: 4%;
        width: 23.6%;
        float: left;
    }

    .unitCardMainDiv .secondColumn {
        font-size: 140%;
        padding-top: 2.5%;
    }

    .unitCardMainDiv .secondColumn .heightTwoLines {
        height: 3.2pt * @_fontSizePortrait;
        overflow-y: hidden;
    }

    .unitCardMainDiv .onlineDataContainer {
        margin-top: 3px * @_deviceViewportWidthOnePercent;
    }

    .unitCardMainDiv .onlineDataContainer .onlineDataElement {
        float: left;
        padding-left: 3%;
        width: 44%;
        margin-top: 7px * @_deviceViewportWidthOnePercent;
    }

    .unitCardMainDiv .onlineDataContainer .onlineDataElement img {
        float: left;
        height: 7px * @_deviceViewportWidthOnePercent;
    }

    .unitCardMainDiv .onlineDataContainer .onlineDataElement .data {
        overflow: hidden;
        margin-top: 4.5%;
        padding-left: 7.1%;
        font-size: 125%;
    }

    .unitCardMainDiv .goToMapButton {
        height: 12.5px * @_deviceViewportWidthOnePercent;
        margin-top: 4.5px * @_deviceViewportWidthOnePercent;
        width: 100%;
    }

    .unitCardMainDiv .buttonsContainer {
        margin-top: 10px * @_deviceViewportWidthOnePercent;
        width: 100%;
    }

    .unitCardMainDiv .buttonsContainer .trackButton {
        height: 12.5px * @_deviceViewportWidthOnePercent;
        width: 48%;
    }

    .unitCardMainDiv .buttonsContainer .reportButton {
        height: 12.5px * @_deviceViewportWidthOnePercent;
        width: 48%;
    }

}

.landscapePortraitOrientator(@orientation) when ("@{orientation}" = "landscape")
{
    @p_listItemHeight: 19.1px * @_deviceViewportHeightOnePercent;

    body
    {
        font-size: @_fontSizeLandscape;
    }

    .headerViewContainer
    {
        height: @_headerHeightLandscape;
    }

    .logoutB,
    .mapB,
    .onlineDataB,
    .reportB,
    .infoB,
    .trackB
    {
        height: 100%;
        color: white;
    }

    .tileContainer
    {
        margin-top: 8%;
        margin-left: 3%;
    }

    .menuTilesContainer
    {
        font-size: @_fontSizeLandscapeFromWidth;
        .zeroTopLeftRightAbsolute;
        overflow-y: auto;
        height: 100px * @_deviceViewportHeightOnePercent;
    }

        .menuTilesContainer img
        {
            width: 100%;
        }

    .tile
    {
        width: floor(21.36px * @_deviceViewportWidthOnePercent);
        height: floor(21.36px * @_deviceViewportWidthOnePercent);
        margin-right: 1.8px * @_deviceViewportWidthOnePercent;
        margin-bottom: 1.8px * @_deviceViewportWidthOnePercent;
        display: block;
        float: left;
    }

        .tile.double
        {
            width: floor(44.52px * @_deviceViewportWidthOnePercent);
        }

        .tile.mini
        {
            width: floor(11.94px * @_deviceViewportWidthOnePercent);
            height: floor(11.94px * @_deviceViewportWidthOnePercent);
        }

    .logoutB
    {
        background-color: #008bc0;
    }

    .mapB
    {
        background-color: #e51955;
    }

    .onlineDataB
    {
        background-color: #ea871b;
    }

    .reportB
    {
        background-color: #7aab36;
    }

    .infoB {
        background-color: #4d4d4d;
    }

    .trackB
    {
        background-color: #fcc300;
    }
    

    .unitListItemChecked::before
    {
        @_p-bordersSize: 8.9px * @_deviceViewportHeightOnePercent;
        width: 0;
        height: 0;
        border-top: @_p-bordersSize solid;
        border-top-color: inherit;
        border-left: @_p-bordersSize solid transparent;
        position: absolute;
        display: block;
        right: 0;
        content: "";
        top: 0;
    }

    .unitListItemChecked::after
    {
        position: absolute;
        content: "";
        background: transparent url("../../../../Content/vector/select.svg") no-repeat;
        background-position: 0px, 0px;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        -webkit-background-size: 100%;
        background-size: 100%;
        display: block;
        top: 1px * @_deviceViewportHeightOnePercent;
        right: 1.2px * @_deviceViewportHeightOnePercent;
        width: 3px * @_deviceViewportHeightOnePercent;
        height: 3px * @_deviceViewportHeightOnePercent;
    }

    .simpleListItemChecked::before
    {
        @_p-bordersSize: 8.9px * @_deviceViewportHeightOnePercent;
        width: 0;
        height: 0;
        border-top: @_p-bordersSize solid;
        border-top-color: inherit;
        border-left: @_p-bordersSize solid transparent;
        position: absolute;
        display: block;
        right: 0;
        content: "";
        top: 0;
    }

    .simpleListItemChecked::after
    {
        position: absolute;
        content: "";
        background: transparent url("../../../../Content/vector/select.svg") no-repeat;
        background-position: 0px, 0px;
        -moz-background-size: 100%;
        -o-background-size: 100%;
        -webkit-background-size: 100%;
        background-size: 100%;
        display: block;
        top: 1px * @_deviceViewportHeightOnePercent;
        right: 1.2px * @_deviceViewportHeightOnePercent;
        width: 3px * @_deviceViewportHeightOnePercent;
        height: 3px * @_deviceViewportHeightOnePercent;
    }

    .bottomMarginDiv {
        height: 3px * @_deviceViewportHeightOnePercent;
    }

    .moveToLastPreviousButtonsContainer{
        height: 9px * @_deviceViewportHeightOnePercent;
    }

    .moveToFirstNextButtonsContainer {
        margin-top: 3px * @_deviceViewportHeightOnePercent;
        height: 9px * @_deviceViewportHeightOnePercent;
    }

    @p_pageNumberAndPagesCountContainerWidth: 17px * @_deviceViewportHeightOnePercent;

    .moveToFirstOrLastButtonContainer {
        width: 0.476px * (94px*@_deviceViewportWidthOnePercent - @p_pageNumberAndPagesCountContainerWidth);
    }

    .moveToNextOrPreviousButtonContainer {
        width: 0.523px * (94px*@_deviceViewportWidthOnePercent - @p_pageNumberAndPagesCountContainerWidth);
    }

    .pageNumberAndPagesCountContainer {
        width: @p_pageNumberAndPagesCountContainerWidth;
    }

    .dataListMainDiv .contentDiv
    {
        top: @_headerHeightLandscape;
        overflow-y: auto;
    }

    .dataListMainDiv .footerDiv
    {
        height: 0.75px * @_headerHeightLandscape;
    }

    .dataListMainDiv .contentDivWithFooter
    {
        top: @_headerHeightLandscape;
        bottom: 0.75px * @_headerHeightLandscape;
        overflow-y: auto;
    }

    .dataListMainDiv .listItemWithText
    {
        height: 12px * @_deviceViewportHeightOnePercent;
        margin-bottom: 3.33px * @_deviceViewportHeightOnePercent;
        margin-top: 3.33px * @_deviceViewportHeightOnePercent;
        position: relative;
    }

    .dataListMainDiv .listOfUnitsItem
    {
        margin-bottom: 3.33px * @_deviceViewportHeightOnePercent;
        margin-top: 3.33px * @_deviceViewportHeightOnePercent;
        height: @p_listItemHeight;
    }

    .groupCollapsed
    {
        margin-bottom: 3.33px * @_deviceViewportHeightOnePercent;
        margin-top: 3.33px * @_deviceViewportHeightOnePercent;
        height: @p_listItemHeight;
    }

    .groupExpanded
    {
        margin-bottom: 3.33px * @_deviceViewportHeightOnePercent;
        margin-top: 3.33px * @_deviceViewportHeightOnePercent;
        height: 0.5px * @p_listItemHeight;
    }

    .groupElementMain .groupImage{
        top: 0.053px * @p_listItemHeight;
        left: 0.173px * @p_listItemHeight;
    }

    .groupElementMain .groupContainer{
        width: 0.517px * @p_listItemHeight;
    }

    .groupElementMain .arrowImage{
        bottom: 0.138px * @p_listItemHeight;
    }

    .groupElementMain .arrowContainer{
        width: 0.322px * @p_listItemHeight;
    }


    .trackPeriodMainDiv
    {
        margin-top: @_headerHeightLandscape + 5.4px * @_deviceViewportHeightOnePercent;
    }

        .trackPeriodMainDiv .beginDateTimeContainer
        {
            float: left;
            height: 9.6px * @_deviceViewportHeightOnePercent;
            width: 40.6px * @_deviceViewportWidthOnePercent + 2px * @_deviceViewportHeightOnePercent;
            margin-top: 8.5px * @_deviceViewportHeightOnePercent;
        }

        .trackPeriodMainDiv .endDateTimeContainer
        {
            float: right;
            height: 9.6px * @_deviceViewportHeightOnePercent;
            width: 40.6px * @_deviceViewportWidthOnePercent + 2px * @_deviceViewportHeightOnePercent;
            margin-top: 8.5px * @_deviceViewportHeightOnePercent;
        }

        .trackPeriodMainDiv .nextStepButton
        {
            height: 9.5px * @_deviceViewportHeightOnePercent;
        }


    @p_headerHeight: @_headerHeightLandscape;
    @p_footerHeight: 28px * @_deviceViewportHeightOnePercent;
    @p_mapHeight: @deviceViewportHeight - @p_headerHeight - @p_footerHeight;
    @p_footerTopOffset: @deviceViewportHeight - @p_footerHeight;

    .p_track_common
    {
        position: absolute;
        left: 0;
        right: 0;
        width: @deviceViewportWidth;
    }

    .p_footerTopBottom
    {
        top: @p_footerTopOffset;
        bottom: 0;
        height: @p_footerHeight;
    }

    .trackHeader
    {
        .p_track_common;
        top: 0;
        bottom: @deviceViewportHeight - @p_headerHeight;
        height: @p_headerHeight;
    }

    .trackMap
    {
        .p_track_common;
        top: @p_headerHeight;
        bottom: @p_footerHeight;
        height: @p_mapHeight;
    }

    .trackFooter
    {
        .p_track_common;
        .p_footerTopBottom;
    }

    .parkingFooter
    {
        .p_track_common;
        .p_footerTopBottom;
    }

    @p_imgSize: 32px;

    .imgParkingClass
    {
        float: left;
        height: @p_imgSize;
        width: @p_imgSize;
        margin-top: -@p_imgSize;
    }

    .parkingSign
    {
        font-size: 130%;
        .text-overflow-trunc-with-dotdotdot;
        text-align: center;
        color: white;
        width: @p_imgSize;
        margin-top: -@p_imgSize + 3px;
        position: absolute;
    }
          





    .unitCardMainDiv .contentDiv {
        top: @_headerHeightLandscape;
        overflow-y: auto;
    }

        .unitCardMainDiv .unitDataDiv
        {
            margin-top: 6px * @_deviceViewportHeightOnePercent;
            width: 100%;
        }

            .unitCardMainDiv .firstColumn
            {
                font-size: 90%;
                vertical-align: top;
                padding-top: 2.9px * @_deviceViewportHeightOnePercent;
                width: 23.6px * @_deviceViewportHeightOnePercent;
                float: left;
            }

            .unitCardMainDiv .secondColumn
            {
                font-size: 140%;
                padding-top: 1.8px * @_deviceViewportHeightOnePercent;
            }

                .unitCardMainDiv .secondColumn .heightTwoLines
                {
                    .text-overflow-trunc-with-dotdotdot;
                }

        .unitCardMainDiv .onlineDataContainer
        {
            margin-top: 7px * @_deviceViewportHeightOnePercent;
        }

            .unitCardMainDiv .onlineDataContainer .onlineDataElement
            {
                float: left;
                margin-right: 4%;
                width: 20%;
            }

            .unitCardMainDiv .onlineDataContainer .onlineDataElement img
            {
                float: left;
                height: 7px * @_deviceViewportHeightOnePercent;
            }

            .unitCardMainDiv .onlineDataContainer .onlineDataElement .data
            {
                .text-overflow-trunc-with-dotdotdot;
                margin-top: 4.5%;
                padding-left: 7.1%;
                font-size: 125%;
            }

        .unitCardMainDiv .goToMapButton
        {
            height: 12.5px * @_deviceViewportHeightOnePercent;
            width: 48%;
            margin-top: 1.5px * @_deviceViewportWidthOnePercent;
        }

        .unitCardMainDiv .buttonsContainer
        {
            margin-top: 7px * @_deviceViewportHeightOnePercent;
            width: 100%;
        }

            .unitCardMainDiv .buttonsContainer .trackButton
            {
                height: 12.5px * @_deviceViewportHeightOnePercent;
                width: 48%;
            }

            .unitCardMainDiv .buttonsContainer .reportButton
            {
                height: 12.5px * @_deviceViewportHeightOnePercent;
                width: 48%;
            }

    .onlineDataListItemGoToMapButton {
        width: 15px * @_deviceViewportHeightOnePercent !important;
        margin-left: 2px * @_deviceViewportHeightOnePercent !important;
    }
}