/*
 * INDEX
 * 1. Font faces and font family definitions
 * 2. Title styles
 * 3. Separators
 * 4. Custom styles for login
 * 5. HELPER CLASSES
 * 6. LAYOUT DEFINITIONS
 * 7. COMMON ELEMENTS ON DIFERENTS SECTIONS
 * 8. Initial Screen custom styles
 * 9. mainSelection custom styles
 * 10. application custom styles
 * 11. JpaneScroll styles
 * 12. Listing page styles
 * 13. Loading splash screen styles
 * 14. RateSelector custom styles
 * 15. Claim styles
 * 16. Directive Syles: Device list
 * 17. Accesories Styles.
 * 18. More Lines custom styles
 * 19. Information center custom styles
 * 20. Publicity custom styles
 * 22. Tasks Records
 * 23. Selectize
 * 24. Flex Layout
 * 24. Leads Rateselector
 * 25. Login changes
*/

/* 
 * REMEMBER: If you wanna create a new section, please, add it to the index.
 * NOTE: Keep 4 blank spaces between sections in order to keep visual clearness. 
*/



/* SECTION 1: Font Faces and font family definitions */
@font-face {
    font-family: 'VodafoneLt';
    src: local('VodafoneLt'), local('VodafoneLt'), url('VodafoneLt.ttf') format('truetype');
}
@font-face {
    font-family: 'VodafoneRgBd';
    src: local('VodafoneRgBd'), local('VodafoneRgBd'), url('VodafoneRgBd.ttf') format('truetype');
}body, html{
    font-family: 'VodafoneLt';
    height:100%;
    min-height: 100%;
    -webkit-text-size-adjust: none;
}
b, .bold{
    font-family: 'VodafoneRgBd';
}
.strong{
    font-weight: bold!important;
}
label{
    margin: 0;
}




/* SECTION 2: Title styles */
.login-title {
    font-size: 8rem;
    font-family: 'VodafoneLt';
    font-weight: 100;
    color: #414d4e;
}
.title{
    font-size: 10vh;
    font-family: 'VodafoneLt';
    font-weight: 100;
    color: #414d4e;
}
.size1-5vh {
    font-size: 1.5vh;
}
.size2vh{
    font-size: 2vh;
}
.size2-5vh{
    font-size: 2.5vh;
}
.size3vh{
    font-size: 3vh;
}
.size3-5vh{
    font-size: 3.5vh;
}
.size4vh{
    font-size: 4vh;
}
.size4-5vh{
    font-size: 4.5vh;
}
.section-title{
    font-size: 7vh;
}
.secondary-title{
    font-size: 3.2vh;
}
.small-title{
    font-size: 3vh;
}
.little-title{
    font-size: 2vh;
}
.medium-title{
    font-size: 3.6vh;
}
.title.red{
    color:#e60000;
}
.title.white{
    color:white;
}




/* SECTION 3: Separators */
.dotted-line{
    border:none;
    border-top:1px dashed #414d4e;
    margin-top: 4vh;
    margin-bottom: 6vh;
}




/* SECTION 4 Custom styles for login */ 
.login.container{
    display: table-cell;
    vertical-align: middle;
}
.login.container form{
    margin: 0 auto;
    width:30%;
}
.login .row.inputrow{
    margin-bottom:4vh;
}




/* SECTION 5: HELPER CLASSES */
.sortorder:after {
  content: '\25b2';   /* BLACK UP-POINTING TRIANGLE */
}
.sortorder.reverse:after {
  content: '\25bc';   /* BLACK DOWN-POINTING TRIANGLE */
}

.band-promo {
    position: absolute;
    top: -55px;
    right: -215px;
}
.band-promo.inverted {
    top: -53px;
    right: -225px;
}
.band-promo svg {
    width: 30%;
}

.band-promo.inverted svg polygon {
    fill: #FFFFFF;
}
.band-promo.inverted svg text {
    fill: #e60000;
}

@media (min-width: 1281px) {
    .band-promo {
        top: -42px;
        right: -60px;
    }
    .band-promo.inverted {
        top: -43px;
        right: -68px;
    }
    .band-promo svg {
        width: 70%;
    }
}
@media (min-width:1300px) {
    .band-promo {
        right: -53px;
        top: -48px;
        width: 150px;
    }

    .band-promo.inverted {
        right: -62px;
        top: -48px;
        width: 150px;
    }
}

.homerate-resizer, .phonerate-resizer, .tvRate-resizer, .phones-resizer, .datarate-resizer, .vfhomedevice-resizer{
    font-size:20px;
}

@media (min-width: 768px) {
    .lineheightSpecial {
        line-height: 1em;
    }
}

@media (min-width: 1400px) {
    .lineheightSpecial {
        line-height: 1.2em;
    }
}
.botonera-phonretail-app .hover-darkred:hover i:first-child{
    color: darkred!important;
}
.pager{
    margin: 0 !important;
}
ul.pager li a, .device-pager-button{
    background-color: #e60000!important;
    color: white !important;
    border-color: #e60000;
    font-size: 2vh;
}
ul.pager li a:hover, ul.pager li.disabled a:hover, ul.pager li a:active, .device-pager-button{
    background-color: #e60000!important;
    color:white !important;
}
ul.pager li.disabled a, ul.pager li.disabled a:hover, ul.pager li.disabled a:active{
    background-color: #d9d9d9!important;
    color: #444 !important;
    border-color: #d9d9d9;
}

.device-pager-button{
    border-radius: 50%;
    width:4.5vh;
    height:4.5vh;
    font-size: 3vh!important;
    font-weight: bold;
    padding-left:1.5vh;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.device-pager-button:hover{
    margin-top:1px;
}
.device-pager-button:active{
    background-color:darkred!important;
}
.device-pager-button.disabled, .device-pager-button.disabled:active{
    background-color:#d9d9d9!important;
    color:#444!important;
    cursor:not-allowed;
}

.visualClear{
    overflow: hidden;
}
.displaytable{
    display:table;
}
.displaytablecell-centered{
    display: table-cell;
    vertical-align: middle;
}
.custom-center-block {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.ng-include-fix{
    line-height: 0;
}
.lineheight1em{
    line-height: 1em;
}
.no-padding {
    padding: 0 !important;
}
.vcenter {
    display: flex;
    align-items: center;
}
/* this style has to be applied with vcenter */
.justify_items_middle{
    justify-content: center;
}
.number{
    font-size: 4vh;
    color: #e60000;
}
.btn:hover {
    margin-top: 1px;
    border-bottom-width: 3px;
}
.pagination{
    margin: 0;
}
.margin1vh-top{
    margin-top: 1vh;
}
.margin1vh-bottom{
    margin-bottom: 1vh;
}
.margin1vh-right{
    margin-right: 1vh;
}
.margin1vh-left{
    margin-left: 1vh;
}
.margin2vh-top{
    margin-top: 2vh;
}
.margin2vh-bottom{
    margin-bottom: 2vh;
}
.margin2vh-right{
    margin-right: 2vh;
}
.margin2vh-left{
    margin-left: 2vh;
}
.margin3vh-top{
    margin-top: 3vh;
}
.margin3vh-bottom{
    margin-bottom: 3vh;
}
.margin3vh-right{
    margin-right: 3vh;
}
.margin3vh-left{
    margin-left: 3vh;
}
.margin4vh-top{
    margin-top: 4vh;
}
.margin4vh-bottom{
    margin-bottom: 4vh;
}
.margin4vh-right{
    margin-right: 4vh;
}
.margin4vh-left{
    margin-left: 4vh;
}
.margin5vh-top{
    margin-top: 5vh;
}
.margin5vh-bottom{
    margin-bottom: 5vh;
}
.margin5vh-right{
    margin-right: 5vh;
}
.margin5vh-left{
    margin-left: 5vh;
}
.padding1vh-top{
    padding-top: 1vh;
}
.padding1vh-bottom{
    padding-bottom: 1vh;
}
.padding1vh-right{
    padding-right: 1vh;
}
.padding1vh-left{
    padding-left: 1vh;
}
.padding2vh-top{
    padding-top: 2vh;
}
.padding2vh-bottom{
    padding-bottom: 2vh;
}
.padding2vh-right{
    padding-right: 2vh;
}
.padding2vh-left{
    padding-left: 2vh;
}

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}



/*SECTION 6: LAYOUT DEFINITIONS*/
.percent166-width {
    width: 16.66% !important;
}
.percent20-width {
    width: 20% !important;
}
.percent25-width {
    width: 25% !important;
}
.percent33-3-width{
    width: 33.3%;
}
.percent50-width{
    width: 50%;
}
.percent75-width{
    width: 75%;
}
.percent80-width{
    width: 80%;
}
.percent100-width{
    width: 100%;
    min-width: 100%;
}

.percent5-height{
    height: 5%;
}
.percent10-height{
    height: 10%;
}
.percent15-height{
    height: 15%;
}
.percent20-height{
    height: 20%;
}
.percent25-height{
    height: 25%;
}
.percent30-height{
    height: 30%;
}
.percent35-height{
    height: 35%;
}
.percent40-height{
    height: 40%;
}
.percent45-height{
    height: 45%;
}
.percent50-height{
    height: 50%;
    min-height: 50%;
}
.percent55-height{
    height: 55%;
}
.percent60-height{
    height: 60%;
}
.percent65-height{
    height: 65%;
}
.percent70-height{
    height: 70%;
}
.percent75-height{
    height: 75%;
}
.percent80-height{
    height: 80%;
}
.percent85-height{
    height: 85%;
}
.percent90-height{
    height: 90%;
}
.percent95-height{
    height: 95%;
}
.percent100-height{
    height: 100%;
    min-height: 100%;
}

.col-xs-20p,
.col-sm-20p,
.col-md-20p,
.col-lg-20p {
    position: relative;
    min-height: 1px;
    padding-right: 10px;
    padding-left: 10px;
}
.col-xs-20p {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
.col-sm-20p {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-20p {
        width: 20%;
        float: left;
    }
}
@media (min-width: 1200px) {
    .col-lg-20p {
        width: 20%;
        float: left;
    }
}



/* SECTION 7: COMMON ELEMENTS ON DIFERENTS SECTIONS*/
.position-relative{
    position: relative;
}
.configurator-img-small-sim{
    width: 26px;
    height: 30px;
}
.selectable{
    cursor: pointer;
}
.animated{
    -webkit-animation-duration: 0.5s!important;
    -moz-animation-duration: 0.5s!important;
    animation-duration: 0.5s!important; 
}
.btn{
    background-color: #d9d9d9;
    border-bottom-color: #ccc;
}
.btn-danger.active{
    background-color:#e60000;
}
.btn-danger{
    background-color: #e60000;
    border-bottom-color: #e60000;
}
.btn-success.active {
    background-color: #28b62c;
}
.btn-success {
    background-color: #28b62c;
    border-color: #28b62c;
}

.form-group{
    margin-bottom:5px;
}
.form-group button{
    font-size: 9pt;
}
.form-control.vf-input{
    background-color: #e7e7e7;
    font-size: 3vh;
    height: 6vh;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0) inset;
    border-width: 2px;
}
.form-control.vf-input-form, .selectize-input{
    background-color: #e7e7e7!important;
    font-size: 14pt!important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0) inset!important;
    border-width: 2px;
    background-image: none!important;
}
@media(max-width: 1399px) {
    .form-control.vf-input-form, .selectize-input {
        font-size: 11pt!important;
    }
    .form-group{
        margin-bottom: 5px;
    }
    .form-group button{
        font-size: 8pt;
    }
}
.selectize-input{
    border-color: transparent!important;
}
.selectize-input input{
    font-size:14pt!important;
}
.selectize-dropdown-content .option{
    font-size: 14pt!important;
}
.selectize-dropdown-content .option.active{
    font-size: 14pt!important;
    color:white!important;
    background-color: #e60000!important;
}

#accessories_view .selectize-control{
    height: 25px;
}
#accessories_view .selectize-input{
    height: 25px;
    padding: 2px;
}

.vf-input-form-check{
    width:30px;
    height:30px;
}
.vf-input-form-radio{
    width:30px;
    height:30px;
}
.circle{
    border-radius: 50%;
}
.small-btn{
    font-size:3vh!important;
}
.circle-default{
    width: 4vh;
    height: 4vh;
    padding-top: 1vh;
    padding-left: 1vh;
    font-size: 2vh!important;
}
.circle-red{
    background-color: #e60000;
    color:#ffffff;
}
.vf-button:hover .circle-red, .circle-red:hover{
    background-color: #64050a;
}
.vf-button:active .circle-red, .circle-red:active{
    background-color: #e60000;
}
.vf-button{
    font-size: 3.4vh;
    color: #e60000;
    cursor: pointer;
    font-family: 'VodafoneRgBd';
    font-weight: bold;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
}
.vf-button.tmovil{
    color: #414d4e;
}
.vf-button-secondary{
    font-size: 3.4vh;
    color: #00b0ca;
    cursor: pointer;
    font-family: 'VodafoneRgBd';
    font-weight: bold;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
}
.vf-button-addon{
    font-family: 'VodafoneLt';
    font-size: 3vh;
    margin-left: 10px;
}
.vf-button-arrow.tmovil{
    color: #ffc107;
}
#submit_button.tmovil:hover, #submit_button.tmovil:hover .vf-button-arrow.tmovil {
    color: black;
}
.vf-button-addon-left{
    font-family: 'VodafoneLt';
    font-size: 3vh;
    margin-right: 10px;
}
.vf-button-addon-small{
    font-family: 'VodafoneLt';
    font-size: 2vh;
    margin-left: 10px;
}
.vf-button:hover, vf-link:hover{
    color: #64050a;
}
.vf-button:active, vf-link:active{
    color: #e60000;
}
.vf-button-secondary:hover{
    color:#007c92;
}
.vf-button-secondary:active{
    color:#00b0ca;
}
.vf-link{
    font-size: 2.5vh;
    color: #e60000;
    text-decoration: none;
    font-family: 'VodafoneRgBd';
    font-weight: bold;
}
.vf-link a{
    color:inherit;
    text-decoration: none;
}
.notification-bell{
    font-size: 1em !important;
}
.notification-tasks{
    background-color: #f75252;
    border-radius: 50%;
    color: white;
    font-size: 0.8em;
    font-weight: bold;
    height: 18px;
    position: absolute;
    right: -3px;
    text-align: center;
    top: -11px;
    width: 17px;
}

/* These styles are for input type range. An example of how it looks can be found at application form. */
input[type=range]{
    -webkit-appearance: none;
    background: none;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 5px;
    background: #d9d9d9;
    border: none;
    border-radius: 3px;
}
input[type=range]::-ms-track{
    height: 5px;
    background: #d9d9d9;
    border: none;
    border-radius: 3px;
}
input[type=range]::-moz-range-track {
    height: 5px;
    background: #d9d9d9;
    border: none;
    border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #e60000;
    margin-top: -13px;
    position: relative;
}
input[type=range]::-ms-thumb {
    -webkit-appearance: none;
    border: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background: #e60000;
    margin-top: -13px;
    position: relative;
}
input[type=range]::-moz-range-thumb {
    -webkit-appearance: none;
    border: none;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background:#e60000;
    margin-top: -13px;
    position: relative;
}
.rate-container.active{
    background: #ededed;
    border-radius: 5px;
}
#MainView1 .rate-container, #MainView2 .rate-container{
    cursor:initial;
}
#MainView1 .rate-container.active, #MainView2 .rate-container.active{
    margin-right: 3px;
} 
#MainView1 .rate-container.active.last-child, #MainView2 .rate-container.active.last-child{
    margin-right: 0;
} 

.rate-container.active .red{ /* Change to turkesa */
    color: #00b0ca;
    font-weight: bold;
    font-family: 'VodafoneRgBd';
}
.rate-container.active .jspTrack{
    background-color: white!important;
}
@media (min-width:481px) {
    .rateSelector .medium-title{
        font-size: 2.1vh;
    }
    .rateSelector .section-title{
        font-size: 3vh;
    }
    .mainViewScrollable{
        height:31.5vh;
        font-size:2vh;
    }
    .img-promotion svg{
        width:  3.5vh !important;
        height: 3.5vh !important;
    }
    .img-promotion-small svg{
        width:  2.5vh !important;
        height: 2.5vh !important;
    }
}
@media (min-width:1281px) {
    .rateSelector .medium-title{
        font-size: 2.5vh;
    }
    .rateSelector .section-title{
        font-size: 5vh;
    }
    .mainViewScrollable{
        height:31vh;
        font-size: 2.5vh;
    }
    .img-promotion svg{
        width:  5.5vh !important;
        height: 5.5vh !important;
    }
    .img-promotion-small svg{
        width:  2.5vh !important;
        height: 2.5vh !important;
    }
}
.mobile-coverage-mapzone .mapzone-button {
    width: 12vh;
}
@media (min-width:1400px) {
    .mobile-coverage-select, .mobile-coverage-mapzone {
        width: 70%;
    }
    .mobile-coverage-mapzone .mapzone-button {
        width: 9vh;
    }
}



/* SECTION 8: Initial Screen custom syles */
.initialScreen svg{
    height: 100%;
    width:70%;
    cursor: pointer;
    margin-bottom: 3%;
}




/* SECTION 9: mainSelection custom styles */
.mainSelection .vf-button{
    font-size: 3vh;
}
@media (min-width:481px) {
    .mainSelection svg{
        height: 100%;
        width:70%;
        cursor: pointer;
        margin-bottom: 3%;
    }
}
@media (min-width:1281px) {
    .mainSelection svg{
        height: 100%;
        width:50%;
        cursor: pointer;
        margin-bottom: 3%;
    }
 }




/* SECTION 10: application custom styles */
.necesityForm .btn{
    height: 30px;
    padding-top:6px;
}
.necesityForm .box1, .necesityForm .box2, .necesityForm .box3{
    padding: 0 2%;
}
.necesityForm .box2{
    border-left: 1px dashed #e60000;
    border-right: 1px dashed #e60000;
}
.necesityForm svg{
    height: 7vh;
    left: 0;
    position: absolute;
    top: -3.5vh;
    width: 10vh;
}
.necesityForm .box3 svg {
    height: 5vh;
    top: -2.5vh;
}
.necesityForm .box3 .first-child svg{
    height: 7vh;
    left: 0;
    position: absolute;
    top: -3.5vh;
    width: 10vh;
}
@media (min-width:481px) {
    .necesityForm .box1, .necesityForm .box2, .necesityForm .box3{
        padding: 0 3% 0;
        font-size: 2.2vh;
    }
    .necesityForm svg{
        height: 6vh;
        left: 0;
        position: absolute;
        top: -3vh;
        width: 9vh;
    }
    .necesityForm .box3 svg {
        height: 5vh;
        top: -2.5vh;
    }
    .necesityForm .box3 .first-child svg{
        height: 6vh;
        left: 0;
        position: absolute;
        top: -3vh;
        width: 9vh;
    }
    .necesityForm .box1 .form-group{
        margin-bottom: 30px;
    }
    .necesityForm .box2 .form-group{
        margin-bottom: 20px;
    }
    .necesityForm .box3 .form-group{
        margin-bottom: 12px;
    }
}
@media (min-width:1281px) {
    .necesityForm .box1, .necesityForm .box2, .necesityForm .box3{
        padding: 0 3% 0;
        font-size: 2.7vh;
    }
    .necesityForm .box3 .form-group{
        margin-bottom: 8px;
    }
 }
@media (min-width:1400px) {
    .necesityForm .box3 .form-group{
        margin-bottom: 15px;
    }
 }
 .necesityForm .netflix svg{
    height: 4vh;
    position: relative;
    top: 0;
    width: 14vh;
}
.necesityForm .football svg{
    position:relative;
    top:0;
    height: 6vh;
    width: 6vh;
}
.necesityForm .spotify svg{
    height: 4vh;
    position: relative;
    top: 0;
    width: 14vh;
}
.necesityForm .spotify_premmium svg{
    height: 4vh;
    position: relative;
    top: 0;
    width: 21vh;
}
.necesityForm .box.center{
    border: 1px dashed #e60000;
    border-top: none;
    border-bottom: none;
}




/* SECTION 11: jscrollpane styles */
.scroll-pane{
    width:100%!important;
}
.jspScrollable{
    width:100%!important;
}
.jspContainer
{
	overflow: hidden;
	position: relative;
    width:100%!important;
}
.jspPane
{
	position: absolute;
    width:100%!important;
}
.jspVerticalBar
{
	position: absolute;
	top: 0;
	right: 0;
	width: 8px;
	height: 100%;
}
.jspHorizontalBar
{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 8px;
}
.jspCap
{
	display: none;
}
.jspHorizontalBar .jspCap
{
	float: left;
}
.jspTrack
{
	background: #d9d9d9;
	position: relative;
    border-radius: 20px;
}
.jspDrag
{
	background: #666666;
	position: relative;
	top: 0;
	left: 0;
	cursor: pointer;
    border-radius: 20px;
}
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
	float: left;
	height: 100%;
}
.jspArrow
{
	background: #50506d;
	text-indent: -20000px;
	display: block;
	cursor: pointer;
	padding: 0;
	margin: 0;
}
.jspArrow.jspDisabled
{
	cursor: default;
	background: #80808d;
}
.jspVerticalBar .jspArrow
{
	height: 16px;
}
.jspHorizontalBar .jspArrow
{
	width: 16px;
	float: left;
	height: 100%;
}
.jspVerticalBar .jspArrow:focus
{
	outline: none;
}
.jspCorner
{
	background: #eeeef4;
	float: left;
	height: 100%;
}
/* Yuk! CSS Hack for IE6 3 pixel bug :( */
* html .jspCorner
{
	margin: 0 -3px 0 0;
}
.TransitionShadow{
        transition: all 0.35s ease-in-out;
        -webkit-transition: all 0.35s ease-in-out;
        -moz-transition: all 0.35s ease-in-out; 
}
.ShadowTop {
    -moz-box-shadow:    inset  0 13px 13px -13px #696868;
    -webkit-box-shadow: inset  0 13px 13px -13px #696868;
     box-shadow:        inset  0 13px 13px -13px #696868;
}
.ShadowBoth{
    -moz-box-shadow:    -8px 0 13px 0 #696868 inset;
    -webkit-box-shadow: -8px 0 13px 0 #696868 inset;
     box-shadow:        -8px 0 13px 0 #696868 inset;
}
.ShadowBottom{
    -moz-box-shadow:    inset  0 -13px 13px -13px #696868;
    -webkit-box-shadow: inset  0 -13px 13px -13px #696868;
     box-shadow:        inset  0 -13px 13px -13px #696868;
}




/* SECTION 12: Listing page styles */
.resume-img svg{
    width: 150px;
    height: 150px;
}
.filter-box, .filter-box-records-task, .filter-box-records-dailyReport {
    background-color: rgba(255, 255, 255, 1);
    border-bottom: 1px dashed rgba(0, 0, 0, 0.48);
    left: 0;
    padding-top: 1vh;
    position: fixed;
    right: 0;
    top: 23%;
    box-shadow: 0 11px 15px rgba(0,0,0,0.5);
    z-index:999;
    /*height:10vh;*/
    min-height: min-content;
}
.filter-box-records-task{
    /*height: 26vh;*/
    top:21%;
}
.filter-box-shadow, .filter-box-shadow-records-task{
    top: 33%;
    z-index: 998;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.298039);
    position: fixed;
    width: 100%;
    left: 0;
    right: 0px;
}
#tableResults{
    font-family: Arial;
}
.tableResults {
    font-family: Arial;
}

/*@media (min-width:1281px) {*/
/*    .filter-box-records-task {*/
/*        height: 32vh;*/
/*    }*/
/*}*/
/*@media (min-width:1400px) {*/
/*    .filter-box-records-task {*/
/*        height: 28vh;*/
/*    }*/
/*}*/


/* SECTION 13: Loading splash screen styles */
.loader-overlay{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:99999999999999999;
    background-color:white;
}
.loader-spinner{
    margin-top: 5vh; margin-bottom: 5vh;
}
.loading-text{
    font-size: 7vh;
}
.loading-text-bottom{
    font-size: 4vh;
}
.cs-loader {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}

.cs-loader-inner {
transform: translateY(-50%);
top: 50%;
position: absolute;
width: calc(100%);
color: #FFF;
padding: 0 100px;
text-align: center;
}

.cs-loader-inner label {
font-size: 20px;
opacity: 0;
display:inline-block;
color:#e60000;
}

@keyframes lol {
0% {
    opacity: 0;
    transform: translateX(-300px);
}
33% {
    opacity: 1;
    transform: translateX(0px);
}
66% {
    opacity: 1;
    transform: translateX(0px);
}
100% {
    opacity: 0;
    transform: translateX(300px);
}
}

@-webkit-keyframes lol {
0% {
    opacity: 0;
    -webkit-transform: translateX(-300px);
}
33% {
    opacity: 1;
    -webkit-transform: translateX(0px);
}
66% {
    opacity: 1;
    -webkit-transform: translateX(0px);
}
100% {
    opacity: 0;
    -webkit-transform: translateX(300px);
}
}

.cs-loader-inner label:nth-child(6) {
-webkit-animation: lol 3s infinite ease-in-out;
animation: lol 3s infinite ease-in-out;
}

.cs-loader-inner label:nth-child(5) {
-webkit-animation: lol 3s 100ms infinite ease-in-out;
animation: lol 3s 100ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(4) {
-webkit-animation: lol 3s 200ms infinite ease-in-out;
animation: lol 3s 200ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(3) {
-webkit-animation: lol 3s 300ms infinite ease-in-out;
animation: lol 3s 300ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(2) {
-webkit-animation: lol 3s 400ms infinite ease-in-out;
animation: lol 3s 400ms infinite ease-in-out;
}

.cs-loader-inner label:nth-child(1) {
-webkit-animation: lol 3s 500ms infinite ease-in-out;
animation: lol 3s 500ms infinite ease-in-out;
}




/* SECTION 14: Rateselector custom styles */

.rs-pagination-container{
    height: 10px;
    position: absolute;
    top: -6px;
    left: 0px;
    right: 0px;
}

.rs-pagination-circle{
    width: 10px; 
    height: 10px; 
    border-radius: 50%; 
    background-color: #ffffff; 
    border: 1px solid darkred;
}

.rs-pagination-circle.active{
    background-color: #e60000;
}

.shadow-overlay{
    background-color: rgba(0, 0, 0, 0.4);
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width:100%;
    height:100%;
    z-index: 15;
}

.recommended-rate-topo {
    padding-left: 12px; 
    padding-right: 12px; 
    border-radius: 15px; 
    font-family: initial;
}

/* Arrow box for the cart on the rateselector*/
.arrow_box {
	position: relative;
	background: #e60000;
	border: 4px solid #e60000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}
.arrow_box:after, .arrow_box:before {
	bottom: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
.arrow_box:after {
	border-color: rgba(255, 255, 255, 0);
	border-bottom-color: #e60000;
	border-width: 10px;
	margin-left: -10px;
}
.arrow_box:before {
	border-color: rgba(230, 0, 0, 0);
	border-bottom-color: #e60000;
	border-width: 16px;
	margin-left: -16px;
}
@media (min-width: 992px) {
    .arrow_box:after {
        margin-left: 14.2vh;
    }
    .arrow_box:before {
        margin-left: 13.6vh;
    }
    .floating-cart{
        position: fixed!important;
        top: 12.5vh;
        right: 2.7vh;
        z-index: 20;
        height: 45vh;
        width: 38vh;
    }
    .floating-promo{
        position: fixed!important;
        top: 12.5vh;
        right: 10.7vh;
        z-index: 20;
        height: 45vh;
        width: 38vh;
    }
    .floating-nba{
        position: fixed!important;
        top: 17vh;
        left: 1vh;
        z-index: 20;
        height: 45vh;
        width: 38vh;
    }
    .floating-customerservicesinfo{
        position: fixed!important;
        top: 17vh;
        left: 2vh;
        z-index: 20;
        height: 45vh;
        width: 90%;
    }
    .cart-btn {
        right: 1vh;
    }
    .promo-btn {
        right: 9vh;
    }
    .info-btn {
        left: 5vh;
    }
}
@media (min-width: 1281px) {
    .arrow_box:after {
        margin-left: 14.2vh;
    }
    .arrow_box:before {
        margin-left: 13.6vh;
    }
    .floating-cart{
        position: fixed!important;
        top: 15vh;
        right: 4vh;
        z-index: 20;
        height: 45vh;
        width: 38vh;
    }
    .floating-promo{
        position: fixed!important;
        top: 15vh;
        right: 13vh;
        z-index: 20;
        height: 45vh;
        width: 38vh;
    }
    .floating-nba{
        position: fixed!important;
        top: 17vh;
        left: 23vh;
        z-index: 20;
        height: 45vh;
        width: 38vh;
    }
    .floating-customerservicesinfo{
        position: fixed!important;
        top: 17vh;
        left: 6vh;
        z-index: 20;
        height: 45vh;
        width: 50%;
    }
    .cart-btn {
        right: 1vh;
    }
    .promo-btn {
        right: 10vh;
    }
    .info-btn {
        left: 10vh;
    }
}
@media (min-width:1400px) {
    .arrow_box:after {
        margin-left: 14.2vh;
    }
    .arrow_box:before {
        margin-left: 13.6vh;
    }
    .floating-cart{
        position: fixed!important;
        top: 11vh;
        right: 1vh;
        z-index: 20;
        height: 44vh;
        width: 38vh;
    }
    .floating-promo{
        position: fixed!important;
        top: 11vh;
        right: 11vh;
        z-index: 20;
        height: 44vh;
        width: 38vh;
    }
    .floating-nba {
        position: fixed !important;
        top: 17vh;
        left: 35vh;
        z-index: 20;
        height: 44vh;
        width: 38vh;
    }
    .floating-customerservicesinfo {
        position: fixed !important;
        top: 17vh;
        left: 6vh;
        z-index: 20;
        height: 44vh;
        width: 50%;
    }
}

.navigator-btn{
    position: absolute;
    top:0px;
    cursor:pointer;
}

.info-btn:hover .fill-changable, .cart-btn:hover .fill-changable, .promo-btn:hover .fill-changable, .rex_nbas_info:hover .fill-changable {
    fill: #64050a;
}

.channel-logo-mainview, .extra-service-icon svg{
    max-width: 100%;
    max-height: 100%;
}
.rate-container{
    border-right: 1px dashed #e60000;
    cursor:pointer;
}
.rate-container:last-child{
    border-right: initial;
}
.mainView .border, .bordered{
    border-right: 1px dashed #e60000;
}
am-multiselect .dropdown-menu{
    padding-left: 5px;
    padding-right: 5px;
}

am-multiselect .dropdown-menu > li > a {
    padding: 3px 10px;
    cursor:pointer;
}

am-multiselect .dropdown-menu > li.selected {
    background-color: #ADD8E6;
}

/* Custom animation duration for swipes */
.fast-animation {
    -moz-animation-duration: 0.4s!important;
    -webkit-animation-duration: 0.4s!important;
    animation-duration: 0.4s!important;
}
.slow-animation {
    -moz-animation-duration: 1s!important;
    -webkit-animation-duration: 1s!important;
    animation-duration: 1s!important;
}
#MainView1 svg, #MainView2 svg{
    width: 18vh;
    height: 18vh;
}
@media (min-width:481px) {
    .rateTabDescription{
        font-size: 2.5vh; margin-top: 2vh;
    }
    .offer-summary .small-title{
        font-size:2vh;
    }
    .offer-summary-scroll-pane{
        font-size: 1.4vh;
        font-family: Arial;
    }
    .trash.vf-button{
        font-size:3vh;
    }
    .offer-summary-header .small-title{
        font-size: 2vh;
    }
    .offer-summary-header .vf-input-form{
        font-size: 2vh;
        height:5vh;
        margin-top:1vh;
    }
    .extra-service-selected-title{
        font-size:1.8vh;
    }
}
@media (min-width:1281px) {
    .rateTabDescription{
        font-size: 2.8vh; margin-top: 2vh;
    }
    .offer-summary .small-title{
        font-size:3vh;
    }
    .offer-summary-scroll-pane{
        font-size: 1.8vh;
        font-family: Arial;
    }
    .trash.vf-button{
        font-size:4vh;
    }
    .offer-summary-header .small-title{
        font-size: 3vh;
    }
    .offer-summary-header .vf-input-form{
        font-size: 2vh;
        height:5vh;
        margin-top:1vh;
    }
    .extra-service-selected-title{
        font-size:3vh;
    }
}
.offer-summary-row{
    border-bottom:1px solid #666666;
}
.offer-summary-row:last-child{
    border-bottom:0px solid transparent;
}
.offerEvaluation .offer-summary-row:last-child{
    font-size: 2.5vh!important;
}
.offer-summary-row.cabecera{
    padding-top:1vh;
}
.offer-summary-row div{
    padding-left:10px;
    padding-right:10px;
}
.offerEvaluation div.offer-summary-scroller{
    height: 56vh!important;
}
.offerEvaluation{
    font-size: 2.5vh !important;
}
.faces svg.selected{
    border: 2px solid #e60000;
    border-radius: 5px;
}


.arrow_box.floating-nba::before, .arrow_box.floating-nba::after, .arrow_box.floating-customerservicesinfo::before, .arrow_box.floating-customerservicesinfo::after {
    content: "";
    display: none;
}

/* SECTION 15: Claim styles */
.claim-scroll-pane{
    height: 16vh!important;
}
.rate_banner{
    color:red!important;
    padding:15px;
    border-top: 2px solid #5e2750;
    padding-top:1vh;
}
.rate_descripcion_list{
    color: black;
    padding-left: 15px;
}
.banner_arrow{
    font-size: 34px;
    margin-left: -10px;
}
.banner_rate_title{
    font-size: 22px;
    font-weight: bold;
    color:red;
    clear: both;
    display: block;
}
.banner_rate_info{
    font-size: 19px;
    color: black;
}
.banner_price{
    font-size: 2em;
    font-weight: bold;
    color: #555555;
    line-height: 40px;
    display: block;
} 




/* SECTION 16: Directive styles: Device list */
.devices-no-results {
    position:fixed;
    top:50%;
    left:0;
    right:0;
    width:100%;
    text-align: center;
}
.phone-image {
    max-height: 150px;
    max-width: 100px;
}
.phone-image-large{
    max-height: 160px;
    max-width: 115px;
}
.device{
    padding-left:7px;
    padding-right:7px;
    margin-bottom:14px;
    height: 67vh;  /*<<<<< -----  IF this value changes, you have to modify the setScrollable factory (see mouseWheelSpeed on it).*/
}
.device-list .device .device-container{
    border: 2px solid #e60000; 
    border-radius:5px;
}
.phone-color {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    margin-bottom: 8px;
    box-shadow: 1px 2px 2px #888;
}
.specs .col-xs-12, .specs-row .row{
    border-bottom:1px solid #d9d9d9;
}
.phone-color-small {
    width: 16px;
    height: 16px;
}
.table-phone-prices tr{
    border-bottom:1px solid #ccc;
}
.green-stock{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: green;
    margin-left: 10px;
    margin-top: 5px;
}
.red-stock{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e60000;
    margin-left: 10px;
    margin-top: 5px;
}
.yellow-stock{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: gold;
    margin-left: 10px;
    margin-top: 5px;
    content: 'ajjaj';
}
.device-title{
    font-size: 3.6vh;
}
.color-selected {
    border: 2px solid #FCAFAF !important;
    border-radius: 3px !important;
}
.payment-selected {
    border-color: #e60000 !important;
}
tr.device-rate-selected {
    /*background-color: #E60000;*/
    background-color: #d9d9d9;
    color: #555555 !important;
    font-size: 1.2em;
}
tr.device-rate-selected .btn[disabled] {
    opacity: 1;
    border-color: #E60000;
}
.device-detail-view-stock {
    position: relative;
    top: -0.6vh;
}
.device-pager {
    position: fixed;
    bottom: 2.5vh;
    margin: 0 auto;
    font-size: 4vh;
    z-index:950;
}
@media (min-width: 992px) {
    .device-pager {
        left: 39.8%;
    }
    .device-title{
        font-size: 3vh;
    }
    .table-font-style{
        padding-top:2.5px;
        padding-bottom:2.5px;
    }
    .table-font-size{
        font-size:10px;
    }
    .device-scroll-pane .jspVerticalBar {
        visibility: hidden;
    }
}
@media (min-width: 1281px) {
    .device-pager {
        left: 43.1%;
    }
    .device-title{
        font-size: 3.5vh;
        white-space:nowrap;
    }
    .table-font-style{
        padding: 0px;
    }
    .table-font-size{
        font-size:10px;
    }
    .device-scroll-pane .jspVerticalBar {
        visibility: initial;
    }
}
@media (min-width:1400px) {
    .device-pager{
        left: 42.8%;
    }
    .device-title{
        font-size: 3.5vh;
        white-space:nowrap;
    }
    .table-font-style{
        padding-top:2.5px;
        padding-bottom:2.5px;
    }
    .table-font-size{
        font-size:12px;
    }
 }



/*SECTION 17: Accesories Styles.*/
.accesories-list-device-view{
    height:65vh;
}
.accesories-list-device-view .row-fluid img{
    max-height:68px;
    max-width:68px;
}
@media (min-width: 1281px) {
    .accesories-list-device-view .row-fluid {
        height:35vh;
        margin-bottom: 3vh;
        border-bottom: 1px dashed #e60000;
    }
    .accesories-list-device-view .row-fluid .accesory_description_small{
        font-size:9pt;
        font-family:'Arial';
    }
}
@media (min-width:1400px) {
    .accesories-list-device-view .row-fluid {
        height:20vh;
        margin-bottom: 3vh;
        border-bottom: 1px dashed #e60000;
    }
    .accesories-list-device-view .row-fluid .accesory_description_small{
        font-size:11pt;
        font-family:'Arial';
    }
}
.accesories-list-device-view .row-fluid .price{
    font-size:12pt;
}
.accesories-list-device-view .row-fluid .vf-button, .accesories-list-device-view .row-fluid .vf-button-addon{
    font-size:13pt;
}

.device-horizontal-scroll-pane .rowScroll {
    height:13vh;
}
.device-horizontal-scroll-pane .rowScroll .device-on-tablet {
    border-right:1px dashed #e60000; 
    margin-right: 15px; 
    width:240px; 
    height:12vh;
}
.device-horizontal-scroll-pane .rowScroll .device-on-tablet img {
    max-width:48px; 
    max-height:48px;
}
.device-horizontal-scroll-pane .rowScroll .device-on-tablet .vf-button, .device-horizontal-scroll-pane .rowScroll .device-on-tablet .vf-button .vf-button-addon, .device-horizontal-scroll-pane .rowScroll .device-on-tablet .price{
    font-size:12pt;
}
.device-horizontal-scroll-pane .rowScroll .device-on-tablet .accesory_description_small {
    font-size:10pt;
}

.accessories_results_title {
    font-size: 0.8em;
}
.accessories_results_btn_order {
    width: 35%;
    font-size: 0.8em;
    padding: 1px 3px;
}

@media (min-width: 1100px) {
    .accessories_results_title {
        font-size: 1.5em;
    }
    .accessories_results_btn_order {
        font-size: 1.1em;
    }
}



/* SECTION 18: More Lines custom styles */
@media (min-width: 992px) {
    .add-more-line p{
        font-size:12pt;
        white-space: nowrap;
    }
    .morline-device-title {
        font-size: 2vh;
        white-space:nowrap;
    }
}
@media (min-width: 1281px) {
    .add-more-line p{
        font-size:15pt;
    }
    .morline-device-title {
        font-size: 3vh;
        white-space:nowrap;
    }
}
@media (min-width:1400px) {
    .add-more-line p{
        font-size:15pt;
    }
    .morline-device-title {
        font-size: 3vh;
        white-space:nowrap;
    }
}
.add-more-line p small {
    font-size:12pt;
}
.moreline-added-rate{
    height: 50vh;
    margin-top: 10px;
    border-radius: 3px;
    border: 1px dashed #e60000;
    padding-bottom:1vh;
}
.moreline-added-rate .moreline-added-rate-container {
    padding-top:1vh;
    padding-bottom:2vh;
}
.accesories_scroll_pane{
    height: 46vh;
    width: 100%!important;
}
.accesories-devices-scroll-pane {
    height: 10.5vh;
    width: 100%!important;
}
.selected_device {
    background-color:#e9e9e9;
}
.stock_icon > svg {
    width: 4vh;
    height: 4vh;
    margin-left: 20%;
}
.stock_icon_medium > svg {
    width: 6vh;
    height: 6vh;
}




/* SECTION 19: Information Center Custom styles */
.carousel-control{
    color:#e60000!important;
}

.carousel-control.left{
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%);
    background-image: -o-linear-gradient(left, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%);
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.0001)));
    background-image: linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%);
    background-repeat: repeat-x;
}
.carousel-control.right{
    background-image: -webkit-linear-gradient(right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%);
    background-image: -o-linear-gradient(right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%);
    background-image: -webkit-gradient(linear, right top, right top, from(rgba(0,0,0,0.2)), to(rgba(0,0,0,0.0001)));
    background-image: linear-gradient(to left, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%);
    background-repeat: repeat-x;
}

.modal-border-left{
    border-left: 1px solid #e5e5e5;
}
.modal-border-right{
    border-right: 1px solid #e5e5e5;
}
.modal-border-bottom{
    border-bottom: 1px solid #e5e5e5;
}
.modal-col-padding-left {
    padding-left: 30px;
}
.modal-col-padding-right {
    padding-right: 30px;
}
.modal-col-min-height{
    min-height:15vh;
}
.modal-list-btn:hover{
    background-color: #e9e9e9;
    cursor:pointer;
}
@media (min-width: 1300px) {
    .modal-step-number{
        width: 60px;height: 60px;border-radius: 50%;background-color: #e60000;color: white;font-size: 4vh;margin: 0 auto;margin-bottom: 2vh;padding-top:10px;
    }
    .modal-lg{
        width:170vh !important;
    }
    .custom-modal-body{
        height:65vh;
    }
    .modal-carrousel-img{
        max-height:65vh!important; 
    }
}
@media (min-width: 1366px) {
    .modal-step-number{
        width: 60px;height: 60px;border-radius: 50%;background-color: #e60000;color: white;font-size: 4vh;margin: 0 auto;margin-bottom: 2vh;padding-top:0px;
    }
    .custom-modal-body{
        height:68vh;
    }
    .modal-carrousel-img{
        max-height:68vh!important; 
    }

    .modal-lg {
        width: 130vh !important;
    }
}



/* SECTION 20: Publicity Custom Style */
.advertise-overlay {
    z-index: 999999999999999999;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color: rgba(0,0,0,0.7); 
    width:100%; 
    height:100%; 
    text-align: center;
}
.advertise-img{
    position:relative;
    width: 940px; 
    height: 640px; 
    text-align: center; 
    padding: 20px; 
    background-repeat: no-repeat; 
    display: block;
    margin: auto auto;
}
.advertise-btn-close{
   cursor:pointer; 
   border:2px solid white;
   font-size:17px; 
   font-weight: bold; 
   position: absolute; 
   width:32px; 
   height:32px; 
   border-radius: 50%; 
   top:-10px; 
   right:-10px; 
   background-color: #e60000; 
   color:white; 
}



/* SECTION 21: Promotions on application form */
.promotion-modal-row{
    height:55px;
}
.promotion-modal-row:hover, .promotion-modal-row.selected {
    background-color: #F2F2F2;
}

/* SECTION 22: Task Records */
.tasks-comments .btn {
    background-color: #e60000!important;
    color: white !important;
    border-color: #e60000;
}
.tasks-comments .btn.disabled, .tasks-comments .btn:disabled {
    background-color: #d9d9d9!important;
    color: #444 !important;
    border-color: #d9d9d9;
}
@media (min-width:1025px) {
    #checking-coverage-tooltip {
        top: 13vh !important; 
        right: 6vh !important; 
    }
    #checking-nbas-tooltip {
        top: 18vh !important;
        right: 4vh !important;
    }
}

@media (min-width:1400px) {
    #floating-coverage {
        font-size: 1.8vh !important;
    }
}

/* SECTION 23: Selectize */
.selectize-control.single .selectize-input:after {
    content: ''; /*This will draw the icon*/
    font-family: "Glyphicons Halflings";
    line-height: 2;
    display: block;
    position: absolute;
    top: -5px;
    right: 0;
    background-color: white;
    padding-right: 2px;
}

.selectize-control.single .selectize-input.dropdown-active:after {
    content: '';
    font-family: "Glyphicons Halflings";
    background-color: white;
    padding-right: 2px;

}



/* SECTION 24: Flex Layout */
.container-flex-column, .container-flex-row {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.container-flex-column {
    flex-direction: column;
}
.container-flex-row {
    flex-direction: row;
}



/* SECTION 25: Leads Rateselector */
.lead_rate_border {
    border-right: 2px dashed #e60000;
    border-left: 2px dashed #e60000;
}
.parent_lead_rate_border .lead_rate_border:first-child, .parent_lead_rate_border .lead_rate_border:last-child {
    border: none !important;
}
.lead_rate_selectable {
    cursor: pointer;
}
.lead_rate_selected {
        background-color: #d2d2d2;
    }

.lead_rate_title {
    font-family: 'VodafoneLt';
    font-weight: 100;
    color: #E60000;
    font-size: 3.2vh;
}
.lead_rate_price {
    font-family: 'VodafoneLt';
    font-weight: 100;
    color: #E60000;
    font-size: 3.5vh;
}
.lead_send_request {
    cursor: pointer;
}
.lead_send_request.disabled {
    cursor: initial;
    opacity: 0.5;
}
@media(min-width: 1400px) {
    .lead_rate_title {
        font-size: 5vh;
    }
    .lead_rate_price {
        font-size: 4vh;
    }
    .lead_rate_selectable:hover, .lead_send_request:hover {
        background-color: #EDECEC;
    }
    .lead_rate_selected, .lead_rate_selected:hover {
        background-color: #d2d2d2;
    }
}

.ng-table-header {
    text-align: center;
}


.new-smartnotes-notification {
    box-shadow: 1px 1px 15px 3px #888888;
    z-index: 1500;
    width: 300px;
    padding: 15px;
    background-color: white;
    border: 2px solid #E60000;
    border-radius: 10px;
    position: absolute;
    top: 20px;
    right: 20px;
    color: #E60000;

}
.new-smartnotes-notification-title {
    font-size: 180%;
    font-weight: bold;
    font-family: VodafoneRgBd;
}
.new-smartnotes-notification-manage {
    text-align: right;
    font-family: VodafoneRgBd;
    font-size: 150%;
    justify-content: flex-end;
    align-self: flex-end;
}
.new-smartnotes-notification-manage a {
    color: #E60000;
    text-decoration: none;
}

.filter-box-snrecords {
    /*height: 30vh !important;*/
    top: 21% !important;
}
/*@media (min-width: 1281px) {*/
/*    .filter-box-snrecords {*/
/*        height: 36vh !important;*/
/*    }*/
/*}*/
/*@media (min-width: 1400px) {*/
/*    .filter-box-snrecords {*/
/*        height: 28vh !important;*/
/*    }*/
/*}*/
@media (max-width: 1399px) {
    body {
        line-height: 1;
    }
}

.x-svg-container {
    flex: 0 1 300px;
    min-width: 150px;
    text-align: center;
    justify-content: space-around;
    position: relative;
}
.x-svg-container img{
    height: 50px !important;
    width: 50px !important;
}
.x-misc-price {
    font-size: 18px;
}
@media(min-width: 1366px) {
    .x-misc-price {
        font-size: 20px;
    }
}
.x-misc-hidden {
    display: none !important;
}
.x-misc-selectable {
    cursor: pointer;
}
.x-misc-selected {
    background-color: #ededed;
}
.x-misc-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    display: none !important;
}
.x-svg-container .img-promotion {
    position: absolute;
    bottom: 0px;
}
.x-svg-container .img-promotion svg {
    height: 35px !important;
    width: 35px !important;
}

.iot-button-select-payment {
    font-size: 20px;
    width: 50%;
    float: left;
}
@media (max-width: 1366px) {
    .iot-button-select-payment {
        font-size: 18px;
    }
}


.ag-theme-blue .ag-header {
    background-color: #E60000 !important;
}
.ag-theme-blue .ag-row-odd {
    background-color: #fff0f0 !important;
}
.ag-floating-bottom-container>div.ag-row {
    border-top: 1px solid #9bc2e6 !important;
}
.ag-floating-bottom-container div.ag-cell {
    padding-left: 1px;
    padding-right: 1px;
    border: none;
}

.device-specification-tooltip {
    width: 250px;
}

.application-nba-list > div:not(:last-child) {
    border-right: 1px dashed grey;
}
.application-nba-list div b {
    font-size: 18px !important;
}

/* Tooltip */
.tooltipRS {
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltipRS .tooltiptextRS {
    display: none;
    width: 180px;
    background-color: black;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    border: 1px solid black;

    bottom: 130%;
    left: 50%;
    margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
    padding: 5px;

    z-index: 15;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipRS:hover .tooltiptextRS {
    display: initial;
    position: absolute;
}

.tooltipRS .tooltiptextRS::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

.largeDialog .modal-dialog {
    width: 90%!important;
}

/* Flex classes */
.flex-column{
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.flex-row{
    display: flex;
    flex-direction: row;
}
.no-wrap{
    flex-wrap: nowrap;
}
.fxFlex {
    flex: 1 1 auto;
}
.space-between-center{
    justify-content: space-between;
    align-items: center;
}
.start-start {
    justify-content: flex-start;
    align-items: flex-start;
}
.start-center{
    justify-content: flex-start;
    align-items: center;
}
.start-end {
    justify-content: flex-start;
    align-items: flex-end;
}
.end-center {
    justify-content: flex-end;
    align-items: center;
}
.center-start {
    justify-content: center;
    align-items: flex-start;
}
.center-center{
    justify-content: center;
    align-items: center;
}
.center-end{
    justify-content: center;
    align-items: flex-end;
}
.center-top{
    justify-content: center;
    align-items: flex-start;
}
.displayFlex{
    display: flex;
}

.align-right{
    justify-content: flex-end;
}

.onenumber-line {
    border: 2px solid #E60000;
    border-radius: 10px;
}
.onenumber-voice-title-container {
    width: 200px;
    max-width: 200px;
    margin: 10px;
    border-right: 2px dashed grey;
}
.onenumber-voice-title {
    color: #E60000;
    font-weight: bold;
}
.onenumber-rate-container {
    padding: 5px;
}
.onenumber-rate {
    border-bottom: 1px dashed #E60000;
    padding: 5px;
}
.onenumber-rate, .onenumber-rate-delete {
    cursor: pointer;
    color: #E60000;
}
.onenumber-rate.selected {
    background-color: #EDEDED;
    color: #00B0CA;
}
.onenumber-rate-name {
    font-size: 18px;
    padding-right: 15px;
}
.onenumber-rate-price {
    font-size: 20px;
    font-weight: bold;
    text-align: right;
}
.onenumber-rate-delete {
    font-size: 18px;
    text-align: center;
    font-weight: bold;
    margin-top: 15px;
}
.onenumber-add {
    width: 30px;
    height: 30px;
    border-radius: 20px;
    border: 1px solid transparent;
    background: #E60000;
    color: white;
    font-weight: bold;
    font-size: 18px;
}

.modal-one-conecta {
    z-index: 1200;
}

/* Minimum padding class => siglas son minimum padding top / minimum padding bottom...*/
.mp{padding: 5px;} .mpt{padding-top: 5px;} .mpr{padding-right: 5px;} .mpb{padding-bottom: 5px;} .mpl{padding-left: 5px;}

/* Default padding class => siglas son default padding top / default padding bottom...*/
.dp{padding: 8px;} .dpt{padding-top: 12px;} .dpr{padding-right: 12px;} .dpb{padding-bottom: 12px;} .dpl{padding-left: 12px;}

/* Default margin class => siglas son default margin top / default margin bottom... */
.dm{margin: 12px;} .dmt{margin-top: 12px;} .dmr{margin-right: 12px;} .dmb{margin-bottom: 12px;} .dml{margin-left: 12px;}

/* Minimum margin class => siglas son minimum margin top / minimum margin botton...*/
.mm{margin: 8px;} .mmt{margin-top: 8px;} .mmr{margin-right: 8px;} .mmb{margin-bottom: 8px;} .mml{margin-left: 8px;}
.mhf{min-height: min-content;}
.nmt{margin-top:0;} .nmb{margin-bottom:0;} .nml{margin-left:0;} .nmr{margin-right:0;} .nm{margin:0;}
.npt{padding-top:0;} .npb{padding-bottom:0;} .npl{padding-left:0;} .npr{padding-right:0;} .np{padding:0;}

/* TMOVIL */
.table-select-btn {
    font-family: Arial;
    padding: 10px;
    border: 2px solid lightgrey;
    background-color: lightgrey;
    font-weight: normal;
    color: black;
    box-shadow: 1px 1px 6px 1px grey;
    cursor: pointer;
}
.table-select-btn-disabled {
    cursor: not-allowed;
    border-color: #E60000;
    background-color: #E60000;
    font-weight: bold;
    color: white;
}
.row-form {
    margin-bottom: 1.5vh;
}
.tmovil .title{
    color: #DCB12D!important;
}

.tmovil .table-select-btn{
    background-color: #DCB12D;
    border-color: #DCB12D;
}
.tmovil .table-select-btn-disabled{
    opacity: .5;
}

.tmovil .vf-button{
    color: #DCB12D!important;
}

.tmovil .circle-red{
    background-color: #DCB12D;
}
.tmovil .ag-theme-blue .ag-header{
    background-color: #DCB12D!important;
}
.tmovil .btn-danger {
    background-color: #DCB12D;
    border-color: #DCB12D;
}

.tmovil .vf-button:hover, vf-link:hover {
    color: #64050a!important;
}

.tmovil .btn-danger:active:hover{
    background-color: #64050a;
}


.tmovil .btn-danger:active:hover,
.tmovil .btn-danger.active:hover,
.tmovil .open>.dropdown-toggle.btn-danger:hover,
.tmovil .btn-danger:active:focus,
.tmovil .btn-danger.active:focus,
.tmovil .open>.dropdown-toggle.btn-danger:focus,
.tmovil .btn-danger:active.focus,
.tmovil .btn-danger.active.focus,
.tmovil .open>.dropdown-toggle.btn-danger.focus
{
    background-color: #dcb02d7e;
    border-color: #dcb02d7e;
}

.tmovil .vf-link{
    color: #DCB12D;
}
.title.common-title.tmovil{
    color: #ffc107;
    font-family: 'Montserrat';
    font-weight: 800;
}
.title.common-title.tmovil-nocolor{
    font-family: 'Montserrat';
    font-weight: 400;
    font-size:20px;
    /*padding-left: 310px;*/
    align-self: end;
}

/* 25. Login changes */
.login-grid{
    width: 400px;
    margin: 0 auto;

    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 24px 1fr min-content 0px;
}
.login-grid .logo{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 12px;
    flex-direction: column;
}
.login-separator{
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-separator .dotted-line{
    width: 40%;
    margin: 0!important;
}
.login-grid .form-singin{
    padding: 12px;
}
.login-grid .form-singin .inputrow{
    margin-bottom: 12px;
}
.legal-advice {
    background-color: #6b6b6b;
    color: white;
    padding: 12px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    text-align: center;
}
@media only screen and (max-width: 600px) {
    .login-grid{
        width: 100%;
    }
    .legal-advice{
        position: relative!important;
    }
}

.mystery-client {
    position: fixed;
    right: 30px;
    bottom: 6px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
}
/*.mystery-client i {*/
/*    font-size: 50px;*/
/*    cursor: pointer;*/
/*}*/