﻿body {
    color: #333333;
    /*max-width: 750px;*/
    min-height: 180px;
    font-family: 'Segoe UI', Tahoma, Verdana;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input::-ms-clear {
    display: none;
}

span {
    cursor: default;
}

section.main {
    padding: 13px;
}

/***************/

.main {
    max-width: 722px;
}

.blueGradient {
    background: rgb(47,140,190); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(47,140,190,1) 0%, rgba(62,154,202,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(47,140,190,1)), color-stop(100%,rgba(62,154,202,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(47,140,190,1) 0%,rgba(62,154,202,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(47,140,190,1) 0%,rgba(62,154,202,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(47,140,190,1) 0%,rgba(62,154,202,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(47,140,190,1) 0%,rgba(62,154,202,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f8cbe', endColorstr='#3e9aca',GradientType=0 ); /* IE6-9 */
}

.allRadius {
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.bottomRadius {
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

.topRadius {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.allButBottomRightRadius {
    -webkit-border-radius: 6px;
    -webkit-border-bottom-right-radius: 0;
    -moz-border-radius: 6px;
    -moz-border-radius-bottomright: 0;
    border-radius: 6px;
    border-bottom-right-radius: 0;
}

.tab {
    font-weight: bold;
    font-size: 15px;
    float: left;
    padding: 5px 25px;
    margin-left: 1px;
    cursor: default;
}

.tabActive {
    background-color: #2f8cbe;
    text-shadow: 0.07em 0.07em 0.07em #212020;
    border: 1px solid Transparent;
    color: #ffffff;
}

.tabInactive {
    background: rgb(254,254,254); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(213,213,213,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,254,1)), color-stop(100%,rgba(213,213,213,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(213,213,213,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(213,213,213,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(213,213,213,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(254,254,254,1) 0%,rgba(213,213,213,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#d5d5d5',GradientType=0 ); /* IE6-9 */
    text-shadow: 0.07em 0.07em 0.07em White;
    border: 1px solid #dddcdc;
    color: #212020;
}

    .tabInactive:hover {
        background: rgb(254,254,254); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(254,254,254,1) 0%, rgba(191,191,191,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,254,254,1)), color-stop(100%,rgba(191,191,191,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(191,191,191,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(191,191,191,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(254,254,254,1) 0%,rgba(191,191,191,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(254,254,254,1) 0%,rgba(191,191,191,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-9 */
    }

    .tabInactive:active {
        padding: 6px 24px 4px 26px;
    }

.tabsContainer {
    padding-left: 5px;
}

.view {
    background-color: #ffffff;
    padding-top: 10px;
    padding-bottom: 10px;
}

.rateCell {
    float: left;
    border-right: 1px solid #d7cfcf;
    min-height: 65px;
    padding-top: 6px;
}

    .rateCell:nth-child(4) {
        border-right-color: transparent;
        min-width: 180px;
        padding-left: 15px;
    }

    .rateCell:nth-child(2), .rateCell:nth-child(3) {
        min-width: 130px;
        padding-right: 10px;
        padding-left: 20px;
    }

    .rateCell:first-child {
        min-width: 110px;
        padding-left: 20px;
        padding-right: 20px;
    }

.flatCell {
    float: left;
    border-right: 1px solid #d7cfcf;
    min-height: 65px;
    padding-top: 6px;
}

    .flatCell:nth-child(5) {
        border-right-color: transparent;
        min-width: 135px;
        padding-left: 10px;
    }

    .flatCell:nth-child(3), .flatCell:nth-child(4) {
        min-width: 90px;
        padding-right: 8px;
        padding-left: 10px;
    }

    .flatCell:nth-child(2) {
        min-width: 75px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .flatCell:first-child {
        min-width: 180px;
        padding-left: 10px;
        padding-right: 10px;
    }

.regularText {
    font-size: 14px;
}

.microUnit {
    text-align: right;
    margin-top: -5px;
}

    .microUnit span {
        font-size: 10px;
    }

.clearBoth {
    clear: both;
}

.strongText {
    font-size: 20px;
    font-style: italic;
    font-weight: bold;
}

.mediumText {
    font-size: 15px;
}

.price {
    padding-left: 5px;
    float: left;
}

.price, .costUnit {
    margin-top: -5px;
}

    .price span:first-child {
        font-size: 27px;
        font-weight: bold;
    }

.vat {
    text-align: right;
    /*margin-top: -13px;*/
    display: inline-block;
    float: right;
    margin: 6px;
}

.vat span {
    font-size: 10pt !important;
    /*font-weight: bold;
    color: #777777;*/
}

.vatPrice {
    margin-left: 8px;
    margin-top: -10px;
    position: absolute;
}

    .vatPrice span {
        font-size: 10px !important;
        color: #777777;
    }

        .vatPrice span:first-child {
            font-weight: bold;
        }

.costUnit {
    padding-top: 8px;
    padding-left: 3px;
    float: left;
}

.appendix {
    background: rgb(62,154,202); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(62,154,202,1) 0%, rgba(77,168,215,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(62,154,202,1)), color-stop(100%,rgba(77,168,215,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(62,154,202,1) 0%,rgba(77,168,215,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(62,154,202,1) 0%,rgba(77,168,215,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(62,154,202,1) 0%,rgba(77,168,215,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(62,154,202,1) 0%,rgba(77,168,215,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e9aca', endColorstr='#4da8d7',GradientType=0 ); /* IE6-9 */
    padding: 0px 10px 10px 10px;
}

.pill {
    padding: 5px 25px;
    text-align: center;
    text-shadow: 0.07em 0.07em 0.07em #212020;
}

    .pill span {
        color: White;
        font-weight: bold;
    }

.cartGradient {
    background: rgb(158,237,31); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(158,237,31,1) 0%, rgba(135,198,29,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(158,237,31,1)), color-stop(100%,rgba(135,198,29,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9eed1f', endColorstr='#87c61d',GradientType=0 ); /* IE6-9 */
    border: 1px solid #85C91A;
}

    .cartGradient:hover {
        background: rgb(158,237,31); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(158,237,31,1) 0%, rgba(135,198,29,1) 45%, rgba(135,198,29,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(158,237,31,1)), color-stop(45%,rgba(135,198,29,1)), color-stop(100%,rgba(135,198,29,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 45%,rgba(135,198,29,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 45%,rgba(135,198,29,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 45%,rgba(135,198,29,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(158,237,31,1) 0%,rgba(135,198,29,1) 45%,rgba(135,198,29,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9eed1f', endColorstr='#87c61d',GradientType=0 ); /* IE6-9 */
    }

    .cartGradient:active {
        background: rgb(135,198,29); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(135,198,29,1) 0%, rgba(135,198,29,1) 65%, rgba(158,237,31,1) 99%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(135,198,29,1)), color-stop(65%,rgba(135,198,29,1)), color-stop(99%,rgba(158,237,31,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(135,198,29,1) 0%,rgba(135,198,29,1) 65%,rgba(158,237,31,1) 99%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(135,198,29,1) 0%,rgba(135,198,29,1) 65%,rgba(158,237,31,1) 99%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(135,198,29,1) 0%,rgba(135,198,29,1) 65%,rgba(158,237,31,1) 99%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(135,198,29,1) 0%,rgba(135,198,29,1) 65%,rgba(158,237,31,1) 99%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87c61d', endColorstr='#9eed1f',GradientType=0 ); /* IE6-9 */
    }

.toRight {
    float: right;
}

.boldText {
    font-weight: bold;
}

.mediumText {
    font-size: 14pt;
}

.stripesBg {
    background-size: 30px 30px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    animation: animate-stripes 2s linear infinite;
}

.displayNone {
    display: none;
}

/***************/

#spinner, .spinner {
    border-width: 1px;
    border-style: solid;
    border-color: #8e8e8e #b8b8b8 #b8b8b8 #8e8e8e !important;
    font-weight: bold;
    /*padding: 1px 5px;*/
    font-size: 14px;
    font-family: inherit !important;
    text-align: right;
    max-width: 120px;
    padding: 5px 8px;
}

    #spinner:hover, #spinner:focus,
    .spinner:hover, .spinner:focus {
        border-color: #515151 !important;
    }

    #spinner ~ .ui-spinner-button,
    .spinner ~ .ui-spinner-button {
        display: none;
    }

#topUpCredit {
    padding-left: 26px;
}

#regionText {
    padding-top: 7px;
    padding-right: 6px;
    float: left;
}

.NewCalculator #region {
    right: 25px;
    height: 35px;
}

.NewCalculator .trigger {
    height:28px;
    padding:3px 6px;
}

.NewCalculator .calculator__selector .trigger {
    margin-right: -25px;
}

#plan {
    position: fixed;
}

    #plan .trigger, #plan .activetrigger, plan .dropcontainer ul {
        min-width: 180px;
    }

#waiter {
    padding-top: 12%;
    margin-bottom: -12%;
}

    #waiter > div {
        border: 1px solid Gray;
        border-radius: 6px;
        height: 20px;
        margin: auto;
        width: 250px;
        background-color: #4DA8D7;
    }

/***************/

@keyframes animate-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 60px 0;
    }
}

/***************//* Additional *//***************/

.calculator__selector {
    text-align: left;
}
    
.calculator__region span {
    color: #000;
    display: inline-block;
    font-weight: 400;
    margin: 0 5px 0 0;
    position: relative;
    top: 0;
    vertical-align: top;
    padding-top: 5px; 
}

#region { z-index: 100000 }
    
span.calculator__label {
  margin: 0;
  font-size: 12px;
}
@media (min-width: 481px) {
  .calculator__label {
    padding: 5px 0;
    font-size: 14px;
  }
  span.calculator__label {
    font-size: 14px;
  }
}

.calculator__content {
    top: -4px;
}

.calculator__tabs li a:hover,
.calculator__tabs li a:hover span {
    cursor: pointer;
}

@media (max-width: 767px) {
  .calculator__tabs li a {
    min-width: 80px;
  }
}

.calculator__input,
input.calculator__input {
    width: 85%;
}

@media (min-width: 481px) {
  .calculator__input,
  input.calculator__input {
    width: 70%;
  }
}