/**
 * Budgetphone Shop
 * 
 * @category Budget
 * @package  Budget_Shop
 * @author   Oleg Eremin <bloodrock.dev@gmail.com>
 */

/******************************** Common */
.content table {
    cursor: default;
}
span.number {
    white-space: nowrap;
}
.steps-bottom {
    display: none;
}
.hide-nonmobile {
    display: none !important;
}
.steps li > span.label {
    display: none;
}
.content table th {
    color: #444;
}
.select-form .select {
    margin: 0 15px;
}
.selectRegion .jq-selectbox {
    min-width: 105px;
}
.shop .numberInfo td.number {
    white-space: nowrap !important;
    min-width: 98px;
    width: 45% !important;
}
.shop .numberInfo td.type {
    width: 30% !important;
}
.shop .numberInfo td.price {
    white-space: nowrap !important;
    min-width: 50px;
    width: 25% !important;
}
.shop .content .link {
    font-family: 'MyriadProSemiBold', Arial, Verdana;
    font-weight: normal;
}
.shop .content .btn-holder a {
    float: left;
}

.shop .selectRegion {
    display: inline-block;
}
.shop .selectRegion .select-form {
    margin: 10px 0 20px;
}
.shop .btn-holder.refresh {
    display: inline-block;
    margin-bottom: -15px;
    margin-left: 10px;
}

.shop .btn-holder.top {
    margin-bottom: 35px;
    padding-bottom: 35px;
}
.shop .btn-holder.bottom {
    margin-top: 40px;
    margin-bottom: 25px;
    padding-bottom: 20px;
}

.shop input {
    background: 0;
    border: 2px solid #ddd;
    color: #444;
    font-family: 'MyriadProSemiBold', 'Trebuchet MS';
    font-weight: normal;
    font-size : 1em;
    padding: 6px 8px 6px 8px;
}
.shop input:focus,
.shop input:active {
    border-color: red;
}

.shop .phoneNumbers.single .info tbody tr:not(.expand):hover,
.shop .already             .info tbody tr:not(.expand):hover,
.shop .subscriptions       .info tbody tr:not(.expand):hover,
.shop .hardware            .info tbody tr:not(.expand):hover {
    background-color: #fcfcfc !important;
    /*font-family: 'MyriadProSemiBold', Arial, Verdana !important;*/
}

/************************************* JQ-Selectbox */
.shop .jq-selectbox__select {
    background: 0;
    border: 2px solid #ddd;
    border-radius: 0;
    border-image: none;
    box-shadow: none !important;
    color: #444;
    font-family: 'MyriadProSemiBold', 'Trebuchet MS';
    font-weight: normal;
    font-size : 1em;
    padding-right: 35px;
    text-shadow: none;
    min-height: 26px;
}
.shop .jq-selectbox__trigger {
    border-left: none;
}
.shop .jq-selectbox__trigger-arrow {
    border-top-color: red;
}
.shop .jq-selectbox:hover .jq-selectbox__trigger-arrow {
    border-top-color: red;
}
.shop .jq-selectbox__dropdown {
    border-radius: 0;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.shop .jq-selectbox__dropdown .option-mobile {
    border-bottom: 1px solid #ccc;
    font-style: italic;
}

/************************************* Session/Validation/Error Messages */
.validation-failed {
    border: 2px dotted red !important;
    background: #fff5f0 !important;
    box-shadow: 0 0 5px rgba(250, 100, 100, 0.2);
}
.shop .messages {
    border: 0 !important;
    display: block;
    margin-bottom: 10px !important;
}
.shop .messages .error-msg {
    border: 3px dotted red !important;
    border-radius: 3px;
    font-family: 'MyriadProBold', Arial, Verdana;
    font-size: 1em !important;
    font-weight: normal !important;
    background-color: #fff9f5;
    color: red;
    padding-left: 15px !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
}
.shop .validation-advice {
    color: red;
    font-size: .85em;
    padding-left: 0px !important;
    background: none;
    letter-spacing: -.5px;
}
.shop h3.not-found {
    color: #777;
    margin-bottom: 30px;
    font-size: 1em;
    font-style: italic;
    font-weight: normal;
}

/************************************* Sequence & Single numbers */
.shop .phoneNumbers.sequence .info tbody:hover {
    background-color: #fbfbfb !important;
}
.shop .phoneNumbers.sequence td.number {
    width: 40% !important;
    min-width: 90px;
}
.shop .phoneNumbers.sequence td.price {
    width: 20% !important;
}
.shop .phoneNumbers.sequence td.action {
    padding-left: 5px;
    width: 20%;
    vertical-align: middle;
}
.shop .phoneNumbers .btn-holder.refresh-bottom {
    margin-top: -10px;
}
.shop .phoneNumbers .text-another-number {
    padding: 20px 0 0;
}

/************************************* Already login form */
.shop .content .login-form h1 {
    margin-top: 20px;
}
.shop .contact-form label {
    color: #444;
    width: 100%;
    font-family: 'MyriadProBold', 'Trebuchet MS', Arial, sans-serif;
    font-size: 1.1em;
    font-weight: normal;
    padding: 5px 0 7px;
}
.shop .contact-form .line input {
    border: 2px solid #ddd;
    width: 300px;
}
.shop .contact-form .line input:focus,
.shop .contact-form .line input:active {
    border-color: red;
}
.shop .contact-form .validation-advice {
    margin-top: -5px;
    margin-bottom: 10px;
}
.shop .contact-form .btn-holder a {
    width: 150px;
    margin-top: 10px;
}

/************************************* Already phone list */
.shop .already.numbers table {
    /*width: 50%;*/
    margin-top: 40px;
}
.shop .already.numbers td.no {
    width: 30%;
}
.shop .already.numbers td.number {
    width: 35% !important;
}
.shop .already.numbers td.technology {
    width: 30%;
}

/************************************* Porting */
.shop .porting label {
    display: inline-block;
    min-width: 150px;
    min-height: 26px;
}
.shop .porting .porting-date {
    margin-top: 5px;
}
.shop .porting .porting-numbers label {
    margin-top: 15px;
}
.shop .porting .porting-numbers input.phone {
    width: 103px;
}
.shop .porting .note {
    margin-top: 50px;
}

.shop tr.selected {
    background: #e2e2e2;
    background: -moz-linear-gradient(top, #e2e2e2 0%, #dbdbdb 50%, #d1d1d1 51%, #fefefe 100%);
    background: -webkit-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -o-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: -ms-linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
}

.shop table.info tr:hover {
    opacity: 1;
}

/************************************* Subscriptions */
.shop .subscriptions h1 {
    margin: 10px 0 20px;
}
.shop .subscriptions table.info tr:first-child  {
    border-top: 1px solid #e0e0e0;
}
.shop .subscriptions table.info td {
    vertical-align: middle;
}
.shop .subscriptions .info td.subscription {
    width: 60%;
    line-height: 25px;
}
.shop .subscriptions .info td.price {
    padding-left: 5%;
}
.shop .subscriptions .info td.subscription .name {
    font-weight: normal;
    color: #444;
    font-size: 1.1em;
    font-family: 'MyriadProBold', Arial, Verdana;
}
.shop .subscriptions .info input.email,
.shop .subscriptions .info input.skype {
    position: absolute;
    z-index: 99999;
    margin-top: -52px;
    margin-left: 100px;
    border-top: none;
    border-left: none;
    border-right: none;
    padding-bottom: 0;
    background-color: #fff;
    font-family: 'MyriadProBoldItalic', Arial, Verdana;
    /*text-align: center;*/
    color: #559900;
    min-width: 180px;
}
.shop .subscriptions .info input::-webkit-input-placeholder {color:#f00; font-family: 'MyriadProSemiBoldItalic';}
.shop .subscriptions .info input::-moz-placeholder          {color:#f00; font-family: 'MyriadProSemiBoldItalic';}
.shop .subscriptions .info input:-moz-placeholder           {color:#f00; font-family: 'MyriadProSemiBoldItalic';}
.shop .subscriptions .info input:-ms-input-placeholder      {color:#f00; font-family: 'MyriadProSemiBoldItalic';}

.shop .subscriptions .info .validation-advice {
    position: absolute;
    margin-top: 0px;
    background-color: #fff !important;
}

/************************************* Hardware */
.shop .hardware h1 {
    margin: 10px 0 20px;
}
.shop .hardware table.info tr:first-child  {
    border-top: 1px solid #e0e0e0;
}
.shop .hardware table.info td {
    vertical-align: middle;
}
.shop .hardware .info td.hardware {
    width: 70%;
    line-height: 25px;
}
.shop .hardware .info td.hardware .description {
    display: block;
    display: -webkit-box;
    height: 49px !important;
    line-height: 25px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop .hardware .info td.image    img:hover,
.shop .hardware .info td.hardware img:hover,
.shop .hardware .info td.hardware .name:hover,
.shop .hardware .info td.hardware .description:hover {
    cursor: pointer;
    /*text-decoration: underline;*/
}
.shop .hardware .info tr.expand td.hardware .description {
    -webkit-line-clamp: inherit;
    height: auto !important;
    max-height: none !important;
}
.shop .hardware .info td.price {
    padding-left: 5%;
}
.shop .hardware .info td.hardware .name {
    font-weight: normal;
    color: #444;
    font-size: 1.1em;
    font-family: 'MyriadProBold', Arial, Verdana;
}
.shop .hardware .info td.image {
    width: 10%;
}
.shop .hardware .info td.image img {
    width: 70px;
    height: auto;
}
.shop .hardware .info .validation-advice {
    position: absolute;
    margin-top: 0px;
    background-color: #fff !important;
}

/************************************* Cart */
.shop .cart td.name {
    width: 50%;
}
.shop .cart td.type {
    width: 17%;
}
.shop .cart td.qty {
    width: 13%;
}
.shop .cart td.price {
    width: 8%;
}
.shop .cart tr.subscription td.name:before,
.shop .cart tr.hardware td.name:before {
    content: "+";
    margin-right: 15px;
    /*color: #888;*/
}
.shop .cart tr.subscription td.name,
.shop .cart tr.hardware td.name {
    padding-left: 10px;
}
.shop .cart a.product-link {
    color: #333;
    text-decoration: none;
    letter-spacing: normal;
    cursor: pointer;
}
.shop .cart a.product-link:hover,
.shop .cart a.product-link:active {
    text-decoration: underline;
}
/*.shop .cart tr.number td {
    font-family: "MyriadProSemiBold", Arial, Verdana;
}*/
.shop .cart td.name form {
    display: inline-block;
}
.shop .cart tr.number td.name span.link.remove {
    /*font-family: 'MyriadProSemiBoldItalic';*/
    font-family: 'MyriadProItalic';
    font-weight: normal;
    font-size: .95em;
    text-decoration: underline;
    color: #f00;
    background-color: #fff;
    padding: 0 11px 2px 10px;
    margin: 0 0 0 5px;
    cursor: pointer;
    position: relative;
    top: 5px;
    line-height: 25px;
}
.shop .cart tr.number td.name span.link.remove:hover,
.shop .cart tr.number td.name span.link.remove:active {
    background-color: #f9f9f9;
}
.shop .cart td.price span.monthly {
    color: #999;
    padding-left: 15px;
    font-style: italic;
    font-size: .95em;
}

.shop .cart td.name span.link.edit {
    font-family: 'MyriadProItalic';
    font-weight: normal;
    font-size: .95em;
    text-decoration: underline;
    color: #f00;
    background-color: #fff;
    padding: 0 11px 2px 10px;
    margin: 0 0 0 5px;
    cursor: pointer;
    position: relative;
    top: 5px;
    line-height: 25px;
}
.shop .cart td.name span.link.edit img {
    width: 11px;
    height: auto;
    padding-top: 8px;
}
.shop .cart td.name span.link.edit:hover,
.shop .cart td.name span.link.edit:active {
    background-color: #f9f9f9;
}

.shop .cart tr.totals {
    border: none;
    float: initial;
    width: 100%;
    background: #fff;
    border-top: 3px solid #ccc;
}
.shop .cart tr.totals td {
    border-bottom: none;
    font-family: 'MyriadProBold', Arial, Helvetica;
    font-size: 1.2em;
    padding-bottom: 0px;
    font-weight: normal;
    line-height: 22px;
    padding-top: 5px;
    color: #444;
}
.shop .cart tr.totals td.name {
    position: absolute;
    right: 160px;
    text-align: right;
}
.shop .cart tr.totals td.price {
    padding-left: 0;
    font-family: 'MyriadProBold', Arial, Helvetica;
    color: #444;
}
.shop .cart tr.totals td.name span.monthly {
    font-family: 'MyriadProBoldItalic', Arial, Helvetica;
    color: #666;
    font-size: .95em;
}
.shop .cart tr.totals td.price span.monthly {
    padding-left: 0;
    font-size: 1em;
    font-family: 'MyriadProBoldItalic', Arial, Helvetica;
    color: #666;
}

/************************************* Yourdata */
.shop .yourdata .link.new-number {
    margin-right: 20px;
    height: 35.5px;
    width: 46%;
}
.shop .yourdata .account-login {
    margin-top: 20px;
}
.shop .yourdata .contact-form .line input {
    width: 100%;
}
.shop .yourdata .contact-form .column .btn-holder a {
    width: 95%;
}
.shop .yourdata .login{ float:right; }
.shop .yourdata #auth-form label{margin-top: 49px; }
.shop .yourdata #auth-form input{ float:left; padding-bottom: 7px; width: 96%; }
.shop .yourdata #auth-form .btn-holder a{ margin:0; }

/*.shop .yourdata #auth-form {
    display: block;
    width: 47%;
    position: absolute;
    margin-top: 200px;
    background-color: #fff;
    z-index: 2;
}
.shop .yourdata #auth-form p{clear: both;}*/
/************************************* MOBILE *****************************/
/************************************* MOBILE *****************************/
@media only screen and (max-width: 737px) {
    .shop .cart td.price {
        width: 14%;
    }
    .shop .cart th.qty,
    .shop .cart td.qty {
        display: none;
    }
}
@media only screen and (max-width: 600px) {
    /* Disable float helper icon */
    div#swifttagcontainerqrd5yu4vgj {
        display: none;
    }

    /* Disable float sticker icon */
    ul#sticker {
        display: none;
    }

    /* errors */
    .shop .subscriptions .info .validation-advice {
        position: absolute;
        margin-top: 0 !important;
        margin-left: 75px;
        background-color: #fff !important;
        width: 69% !important;
        padding: 5px !important;
        z-index: 99999;
        top: 30px;
    }

    .content {
        padding: 20px 20px 20px;
    }
    .columns-holder {
        padding: 0;
    }
    .columns-holder .column {
        margin: 0px;
    }
    .content h1 {
        font-size: 1.4em;
    }
    .steps li.active {
        font-size: 1.4em;
        font-weight: normal;
        color: #444;
        padding-top: 10px;
    }
    .steps li > span.label {
        display: inline;
        float: right;
        font-style: italic;
        color: #c55;
        padding-right: 10%;
    }
    .steps-bottom {
        display: block;
    }
    .hide-nonmobile {
        display: block !important;
    }
    .hide-mobile {
        display: none !important;
    }
    .content .list {
        max-width: 83%;
    }
    .content .membership .list {
        max-width: 60%;
    }

    .content table.info {
        margin-bottom: 30px;
    }
    .content table .add {
        width: 65px;
    }
    /* porting */
    .shop .porting .note {
        margin-top: 30px;
    }

    /* login form */
    .shop .content .login-form h1 {
        font-size: 1.8em;
        /*margin-top: 0;*/
    }
    .shop .contact-form .line input {
        width: 100%;
    }
    .shop .contact-form .btn-holder {
        width: 100%;
        display: flex;
    }
    .shop .contact-form .btn-holder a {
        width: 100%;
    }

    /* select region, refresh button */
    .shop .selectRegion .select-form {
        margin: 30px 0 20px;
    }
    .shop .phoneNumbers.single .selectRegion .select-form {
        margin: 0 0 30px;
    }
    .shop .selectRegion .select-form .select {
        margin: 8px 0;
        display: block;
    }
    .selectRegion .jq-selectbox {
        min-width: 135px;
    }
    .shop .btn-holder.refresh {
        display: inline-block;
        margin-bottom: -15px;
        margin-left: 10px;

    }

    /* phone numbers sequence */
    .shop .phoneNumbers.sequence .selectRegion .select-form {
        margin: 0 0 20px;
    }

    /* already phone list */
    .shop .already.numbers table {
        width: 100%;
        margin-top: 0;
    }
    .shop .already.numbers table th.no,
    .shop .already.numbers table td.no {
        display: none;
    }
    .shop .already.numbers table td.number {
        width: 45% !important;
    }

    /* subscriptions */
    .shop .subscriptions table.info tr {
        border-bottom: 1px solid #ddd;
    }
    .shop .subscriptions table.info td {
        position: relative;
        float: left;
        clear: both;
        width: 75% !important;
        text-align: left;
        border-bottom: none !important;
        padding-top: 0;
        padding-bottom: 0;
    }
    .shop .subscriptions table.info td.subscription {
        padding-top: 5px;
    }
    .shop .subscriptions table.info td.subscription .description {
        line-height: 20px !important;
    }
    .shop .subscriptions table.info td.price {
        padding-left: 0;
        font-style: italic;
    }
    .shop .subscriptions table.info td.action {
        position: absolute;
        right: 20px;
        margin-top: 28px;
    }
    .shop .subscriptions h1 {
        margin: 10px 0 10px;
    }
    .shop .subscriptions .info input.email,
    .shop .subscriptions .info input.skype {
        top: -1px;
        margin-top: 0 !important;
        margin-left: 80px;
        min-width: 60%;
        padding-bottom: 2px;
        width: 66%;
    }

    /* hardware */
    .shop .hardware table.info tr {
        border-bottom: 1px solid #ddd;
    }
    .shop .hardware table.info td {
        position: relative;
        float: left;
        clear: both;
        width: 100% !important;
        text-align: left;
        border-bottom: none !important;
        padding-top: 0;
        padding-bottom: 0;
    }
    .shop .hardware table.info td img {
        float: left;
        width: 15%;
        margin: 5px 5px 5px 0;
    }
    .shop .hardware table.info td.hardware {
        padding-top: 5px;
        padding-bottom: 5px;
        line-height: 20px;
        max-height: 59px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .shop .hardware table.info td.hardware .add {
        margin-left: 5px;
    }
    .shop .hardware table.info tr.expand td.hardware {
        max-height: none !important;
        height: auto !important;
    }
    .shop .hardware table.info td.hardware .description {
        line-height: 20px !important;
    }
    .shop .hardware table.info td.price {
        display: none;
        padding-left: 0;
        font-style: italic;
    }
    .shop .hardware table.info tr.expand td.price {
        display: block;
    }
    .shop .hardware table.info td.action {
        position: absolute;
        right: 20px;
        margin-top: 28px;
    }
    .shop .hardware h1 {
        margin: 10px 0 10px;
    }

    /* Cart */
    .shop h1.cart-title {
        /* font-size: 1.8em; */
        padding-bottom: 0;
        margin-bottom: 5px;
    }
    .shop .cart th {
        display: none;
    }
    .shop .cart td {
        line-height: 1.5em;
        border: none;
    }
    .shop .cart tr {
        border-top: 1px solid #e0e0e0;
    }
    .shop .cart td.name {
        width: 80%;
    }
    .shop .cart .number .name {
        /*font-family: 'MyriadProSemiBold', Arial, Verdana;
        color: #555;*/
    }
    .shop .cart th.type,
    .shop .cart td.type {
        display: none;
    }
    .shop .cart th.qty,
    .shop .cart td.qty {
        display: none;
    }
    .shop .cart td.price {
        width: 20%;
    }
    .shop .cart td.price span.monthly {
        display: none;
    }
    .shop .cart tr.number td.name span.link.remove {
        padding: 0 12px;
        line-height: 24px;
        top: 0px;
    }
    .shop .cart td.name span.link.edit {
        padding: 0 10px 2px 9px;
        top: 0px;
        line-height: 22px;
    }
    .shop .cart td.name span.link.edit img {
        width: 10px;
        padding-top: 7px;
    }
    .shop .cart tr.totals td.name {
        right: 150px;
    }
    .shop .cart tr.totals td.price .monthly {
        display: block;
    }

    /* Yourdata */
    .shop .yourdata .link.new-number {
        margin-right: 0 !important;
    }
}

@media only screen and (max-width: 376px) {
    .content .list {
        max-width: 87%;
    }

    /* cart */
    .shop .cart tr.subscription td.name,
    .shop .cart tr.hardware td.name {
        padding-left: 7px;
    }
    .shop .cart tr.subscription td.name:before,
    .shop .cart tr.hardware td.name:before {
        content: "+";
        margin-right: 8px !important;
    }
    .shop .cart tr.totals td.name {
        right: 120px;
    }
}

@media only screen and (max-width: 320px) {
    .content .list {
        max-width: 100%;
    }
    .content .btn-holder a {
        padding: 0 10px;
    }

    .shop .subscriptions .info .validation-advice {
        width: 60% !important;
        margin-top: -3px !important;
    }
    .shop .subscriptions .info input.email,
    .shop .subscriptions .info input.skype {
        min-width: 86%;
        width: 86%;
        top: -4px;
    }

    /* cart */
    .shop .cart tr.subscription td.name,
    .shop .cart tr.hardware td.name {
        padding-left: 5px;
    }
    .shop .cart tr.subscription td.name:before,
    .shop .cart tr.hardware td.name:before {
        content: "+";
        margin-right: 5px !important;
    }    
}