/************************************************** *** CODE FOR VIEWS OF THE MODULE (COMPANY) *** **************************************************/ .red.accent-2 { background-color: #FF5252 !important; } .red.darken-1 { background-color: #E53935 !important; } .teal.accent-4 { background-color: #00bfa5 !important; } * .prefix.active { color: #42a5f5 !important; } table.striped>tbody>tr:nth-child(odd) { background-color: #e9f3ff; } table.bordered>thead>tr, table.bordered>tbody>tr { border-bottom: 1px solid #e5eaff; } input:not([type]):focus:not([readonly]),input[type=text]:not(.browser-default):focus:not([readonly]),input[type=password]:not(.browser-default):focus:not([readonly]),input[type=email]:not(.browser-default):focus:not([readonly]),input[type=url]:not(.browser-default):focus:not([readonly]),input[type=time]:not(.browser-default):focus:not([readonly]),input[type=date]:not(.browser-default):focus:not([readonly]),input[type=datetime]:not(.browser-default):focus:not([readonly]),input[type=datetime-local]:not(.browser-default):focus:not([readonly]),input[type=tel]:not(.browser-default):focus:not([readonly]),input[type=number]:not(.browser-default):focus:not([readonly]),input[type=search]:not(.browser-default):focus:not([readonly]),textarea.materialize-textarea:focus:not([readonly]) { border-bottom: 1px solid #42a5f5 !important; -webkit-box-shadow: 0 1px 0 0 #42a5f5 !important; box-shadow: 0 1px 0 0 #42a5f5 !important; } .tabs .indicator { background-color: #307dfb; height: 4px; } /*.carousel{ height: 100% !important; border-radius: 3.5px!important; } .carousel-item{ height: 100% !important; }*/ .collection { border: none !important; border-top: 1px solid #e0e0e0 !important; border-bottom: 1px solid #e0e0e0 !important; } .chips .chip.selected { background: #0288d1; color: #fff; } .chip { background: #26c6da ; color: white; } .chips.focus{ border-bottom: 1px solid #9e9e9e; box-shadow: 0 1px 0 0 #42a5f5 !important; color: white; } .center-img{ display: block; margin: 0 auto; } input:not([type]):focus:not([readonly])+label,input[type=text]:not(.browser-default):focus:not([readonly])+label,input[type=password]:not(.browser-default):focus:not([readonly])+label,input[type=email]:not(.browser-default):focus:not([readonly])+label,input[type=url]:not(.browser-default):focus:not([readonly])+label,input[type=time]:not(.browser-default):focus:not([readonly])+label,input[type=date]:not(.browser-default):focus:not([readonly])+label,input[type=datetime]:not(.browser-default):focus:not([readonly])+label,input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,input[type=tel]:not(.browser-default):focus:not([readonly])+label,input[type=number]:not(.browser-default):focus:not([readonly])+label,input[type=search]:not(.browser-default):focus:not([readonly])+label,textarea.materialize-textarea:focus:not([readonly])+label { color:#42a5f5!important; } input.valid:not([type]),input.valid:not([type]):focus,input[type=text].valid:not(.browser-default),input[type=text].valid:not(.browser-default):focus,input[type=password].valid:not(.browser-default),input[type=password].valid:not(.browser-default):focus,input[type=email].valid:not(.browser-default),input[type=email].valid:not(.browser-default):focus,input[type=url].valid:not(.browser-default),input[type=url].valid:not(.browser-default):focus,input[type=time].valid:not(.browser-default),input[type=time].valid:not(.browser-default):focus,input[type=date].valid:not(.browser-default),input[type=date].valid:not(.browser-default):focus,input[type=datetime].valid:not(.browser-default),input[type=datetime].valid:not(.browser-default):focus,input[type=datetime-local].valid:not(.browser-default),input[type=datetime-local].valid:not(.browser-default):focus,input[type=tel].valid:not(.browser-default),input[type=tel].valid:not(.browser-default):focus,input[type=number].valid:not(.browser-default),input[type=number].valid:not(.browser-default):focus,input[type=search].valid:not(.browser-default),input[type=search].valid:not(.browser-default):focus,textarea.materialize-textarea.valid,textarea.materialize-textarea.valid:focus,.select-wrapper.valid>input.select-dropdown { border-bottom: 1px solid #00bfa5; box-shadow: 0 1px 0 0 #00bfa5; } input.invalid:not([type]),input.invalid:not([type]):focus,input[type=text].invalid:not(.browser-default),input[type=text].invalid:not(.browser-default):focus,input[type=password].invalid:not(.browser-default),input[type=password].invalid:not(.browser-default):focus,input[type=email].invalid:not(.browser-default),input[type=email].invalid:not(.browser-default):focus,input[type=url].invalid:not(.browser-default),input[type=url].invalid:not(.browser-default):focus,input[type=time].invalid:not(.browser-default),input[type=time].invalid:not(.browser-default):focus,input[type=date].invalid:not(.browser-default),input[type=date].invalid:not(.browser-default):focus,input[type=datetime].invalid:not(.browser-default),input[type=datetime].invalid:not(.browser-default):focus,input[type=datetime-local].invalid:not(.browser-default),input[type=datetime-local].invalid:not(.browser-default):focus,input[type=tel].invalid:not(.browser-default),input[type=tel].invalid:not(.browser-default):focus,input[type=number].invalid:not(.browser-default),input[type=number].invalid:not(.browser-default):focus,input[type=search].invalid:not(.browser-default),input[type=search].invalid:not(.browser-default):focus,textarea.materialize-textarea.invalid,textarea.materialize-textarea.invalid:focus,.select-wrapper.invalid>input.select-dropdown { border-bottom: 1px solid #FF4081; -webkit-box-shadow: 0 1px 0 0 #FF4081; box-shadow: 0 1px 0 0 #FF4081; } input:not([type]).valid+label:after,input:not([type]):focus.valid+label:after,input[type=text]:not(.browser-default).valid+label:after,input[type=text]:not(.browser-default):focus.valid+label:after,input[type=password]:not(.browser-default).valid+label:after,input[type=password]:not(.browser-default):focus.valid+label:after,input[type=email]:not(.browser-default).valid+label:after,input[type=email]:not(.browser-default):focus.valid+label:after,input[type=url]:not(.browser-default).valid+label:after,input[type=url]:not(.browser-default):focus.valid+label:after,input[type=time]:not(.browser-default).valid+label:after,input[type=time]:not(.browser-default):focus.valid+label:after,input[type=date]:not(.browser-default).valid+label:after,input[type=date]:not(.browser-default):focus.valid+label:after,input[type=datetime]:not(.browser-default).valid+label:after,input[type=datetime]:not(.browser-default):focus.valid+label:after,input[type=datetime-local]:not(.browser-default).valid+label:after,input[type=datetime-local]:not(.browser-default):focus.valid+label:after,input[type=tel]:not(.browser-default).valid+label:after,input[type=tel]:not(.browser-default):focus.valid+label:after,input[type=number]:not(.browser-default).valid+label:after,input[type=number]:not(.browser-default):focus.valid+label:after,input[type=search]:not(.browser-default).valid+label:after,input[type=search]:not(.browser-default):focus.valid+label:after,textarea.materialize-textarea.valid+label:after,textarea.materialize-textarea:focus.valid+label:after,.select-wrapper.valid+label:after { content: attr(data-success); color: #00bfa5; opacity: 1; -webkit-transform: translateY(9px); transform: translateY(9px) } input:not([type]).invalid+label:after,input:not([type]):focus.invalid+label:after,input[type=text]:not(.browser-default).invalid+label:after,input[type=text]:not(.browser-default):focus.invalid+label:after,input[type=password]:not(.browser-default).invalid+label:after,input[type=password]:not(.browser-default):focus.invalid+label:after,input[type=email]:not(.browser-default).invalid+label:after,input[type=email]:not(.browser-default):focus.invalid+label:after,input[type=url]:not(.browser-default).invalid+label:after,input[type=url]:not(.browser-default):focus.invalid+label:after,input[type=time]:not(.browser-default).invalid+label:after,input[type=time]:not(.browser-default):focus.invalid+label:after,input[type=date]:not(.browser-default).invalid+label:after,input[type=date]:not(.browser-default):focus.invalid+label:after,input[type=datetime]:not(.browser-default).invalid+label:after,input[type=datetime]:not(.browser-default):focus.invalid+label:after,input[type=datetime-local]:not(.browser-default).invalid+label:after,input[type=datetime-local]:not(.browser-default):focus.invalid+label:after,input[type=tel]:not(.browser-default).invalid+label:after,input[type=tel]:not(.browser-default):focus.invalid+label:after,input[type=number]:not(.browser-default).invalid+label:after,input[type=number]:not(.browser-default):focus.invalid+label:after,input[type=search]:not(.browser-default).invalid+label:after,input[type=search]:not(.browser-default):focus.invalid+label:after,textarea.materialize-textarea.invalid+label:after,textarea.materialize-textarea:focus.invalid+label:after,.select-wrapper.invalid+label:after { content: attr(data-error); color: #FF4081; opacity: 1; -webkit-transform: translateY(9px); transform: translateY(9px) } .select2{ padding: 8px; } .select2-container--default .select2-selection--single { border: 1px solid #9e9e9e !important; border-radius: 0 !important; padding-left: 0 !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { color: #444; line-height: 18px !important; padding-left: 0 !important; } .select2-container { margin-left: -8px; } .select2-container--default{ padding-left: 0 !important; } .prefix{ padding-top: 8px !important; } .modal-content .row{ margin-bottom: 0; } .btn, .btn-large, .btn-flat { border: none; border-radius: 50px; display: inline-block; height: 36px; line-height: 36px; padding: 0 2rem; text-transform: uppercase; vertical-align: middle; -webkit-tap-highlight-color: transparent; } .botonError{ justify-content: center; display: flex; width: 300px; margin: 0 auto !important; margin-top: 4px !important; } .card{ border-radius: 3.5px!important; } /*.card .card-action{*/ /*padding: 12px 10px;*/ /*}*/ .card-header{ position: relative; padding: 10px; margin-bottom: 50px; overflow: hidden !important; } .card-header h3{ margin: 0; } .cardUsuario { min-width: 300px; } .imgEfecty{ background-image: url("../img/efecty.png"); background-repeat: no-repeat; margin-top: -10px; height: 50px; } #userEfecty{ margin-top: -5px; } .imgEnvioPrueba{ width: 200px; display: block; margin: 0 auto; } .EfectyD{ font-weight: bold; margin-bottom: -30px; } .color__black{ background: #232323; } .color-text3{ color: #888888 !important; } .colorDisplay1{ background: #E83737; } .colorDisplay2{ background: #bdbdbd; } .colorDisplay3{ background:#4BD4A0; } .colorDisplay4{ background:#ECF4FE; } .colorDisplay5{ background:#bbbbbb; } .colorDisplay6{ background:#A0A9BC; } .colorDisplay7{ background: #4e7de9; } .degrade1{ background-image: linear-gradient(-135deg, #5D9CEC 0%, #0E65D7 100%); /* Shape: */ background-image: linear-gradient(-135deg, #187EFF 0%, #0E65D7 100%); /* Shape: */ } .degrade2{ /* Rectangle Copy: */ background-image: linear-gradient(-135deg, #A0D468 0%, #6EAF27 100%); } .degrade3{ /* Rectangle Copy 2: */ background-image: linear-gradient(-135deg, #AC92EC 0%, #7455C3 100%); } .degrade4{ /* Rectangle Copy 3: */ background-image: linear-gradient(-135deg, #ED5565 0%, #D62839 100%); } .azulDegradado{ background-image: linear-gradient(-54deg, #1976D2 0%, #6200EA 100%); } .rojoDegradado{ background-image: linear-gradient(-42deg, #F48FB1 13%, rgba(255,82,82,0.99) 100%); } .amarilloDegradado{ background-image: linear-gradient(-42deg, #FFA000 0%, #BF360C 100%); } .verdeDegradado{ background-image: linear-gradient(-46deg, #1DE9B6 0%, #43A047 100%); } [type="checkbox"].filled-in:checked+label:after { top: 0; width: 20px; height: 20px; border: 2px solid #136ed2; background-color:#307dfb; z-index: 0; } .minCardash{ padding: 16px; padding-bottom: 5px; height: 105px; } .imgCradDash{ display: block; margin: 0 auto; } .headTableCustom{ color: white; background: #3b3b4a; } .card-stacked .valores{ font-size: 23px; } .card-padding{ padding: 0!important; } .CardsInRe{ height: 319px; margin: 0; } .CardsInRe h5{ padding:16px 0 21px; font-size: 18px; font-weight: 500; margin: 0; } .contentSearchCampanas{ height: 65px; position: fixed; width: 100%; display: flex; flex-direction: row; background: #f1f9fe; z-index: 3; padding-bottom: 85px; } .inputCustonBack{ height: 39px; margin: 40px 0; padding: 0!important; background: #ffffff; border-radius: 0 30px 30px 0; overflow: hidden; border-top: 2px solid #2b98f0; border-right: 2px solid #2b98f0; border-bottom: 2px solid #2b98f0; width: 478px !important; margin-top: 0!important; } .inputCustonBack input{ border-bottom-color: white; max-width: 76% !important; margin-top: -3px; margin-left: 10%; padding-left: 32px!important; font-size: 16px!important; } .inputCustonBack label{ position: relative!important; float: right!important; left: -2rem!important; top: -60px; } .inputCustonBack .buscar{ padding-top: 18px !important; padding-left: 9px; color: white!important; margin-top: -16px; margin-left: 7px; } .inputCustonBack i{ padding-top: 4px; right: 6rem!important; } .colorfondo--seccion-card{ background-color: #E7E7F0; } .btn[disabled]{ background: #353535 !important; color: #303030; opacity: 0.2; } tr.selectedDisabled{ background-color: #dcdde4 !important; color:#ababab; } /**Styles that are applied when selecting a row (ReportNotifications) ********************************************************************/ tr.selected{ background-color: #307dfb !important; color: white; } tr.selected .tagWhiteColor{ color: white; border: 1.3px solid #FFFFFF; font-weight: bold; } tr.selected .viewLink{ color: #f2e020; font-weight: bold; } /*** End Code ***/ .deuda h3,h5{ } .modal{ width: 40%; } .modal h4 { font-size: 20px!important; } .modal-1{ width: 90%; } .modal-2{ width: 28%; } .modalError{ height: 569px!important; } .obligacionIcono{ background:#2979FF; height: 53px; width: 53px; margin-right: 30px; } .obligacionIcono img{ display: block; margin: 0 auto; margin-top: 12px; } .obligacionTipo{ padding: 0; } .obligacionTipo p{ margin-top: 14px!important; margin-bottom: 14px!important; } .modalStep{ width: 70%; max-height: 80%; overflow-y: hidden; } .notify-icon{ position: relative; } .dropdown-content li>a, .dropdown-content li>span { color:#307dfb !important; } .avatar{ width: 32px; height: 32px; border-radius: 50%; margin: 8px 0 -12px; } .nav{ background: none; } .nav-buscar{ height: 50px; margin: 0 auto; width: 60%; border-radius: 28px; margin-top: 20px; margin-bottom: 7px; color: #43423c !important; } .padding-row{ padding: 15px; margin-top: -35px; } .gradient-45deg-light-blue-cyan { background: #0288d1; background: -webkit-linear-gradient(45deg, #0288d1 0%, #26c6da 100%); background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%); } /*Button (Enable | Disable) the template of a Notification*/ .gradient-45deg-enabled-disabled-button { background: #8bbcd1; background: -webkit-linear-gradient(45deg, #8bbcd1 0%, #26c6da 100%); background: linear-gradient(45deg, #8bbcd1 0%, #26c6da 100%); } /*Disables the header of the Template drop-down list*/ .disabledNotificationTemplate{ background-color: #f2f1f0; } html { height: 100%; } body { height: 100%; background: #f1f9fe; } /******************************** *** START SECTION (CSS GRID) *** ********************************/ /*Código para la interfaz de 'Empresa' **************************************/ .app-lay { display: grid; /* 1 */ height: 100vh; grid-template-columns: 1fr 30%; /* 2 */ grid-template-rows: 64px 70px 1fr 90px; } .menuGrid { grid-column: 1 / 3; grid-row: 1; z-index: 2; } .contentSearchBarAffiliates { grid-column: 1; grid-row: 2; } .contentTablet { grid-column: 1 / 2; grid-row: 3; /*overflow-y: scroll;*/ padding: 0 2em 1em; } #bodywrap::-webkit-scrollbar { display: none; } .secBotones { grid-column: 1; grid-row: 4; } .politicaDC { grid-column: 1 / 3; grid-row: 5; } .contenedorCardsDerecho { grid-column: 2; grid-row: 2 / 5; overflow-y: scroll; padding: 1em; /*background-color: #E7E7F0;*/ } .notificacionSection { grid-column: 1 / 3; grid-row: 2 / 5; overflow-y: scroll; margin-top: 5vh; } .prueba { grid-column: 1 / 3; grid-row: 2 / 5; overflow-y: scroll; } .prueba2 { grid-column: 1 / 3; grid-row: 1 / 5; } /*Código para la interfaz de 'Afiliados' ****************************************/ /*Código para interfaz 'Obligaciones Pendientes'*/ .contentTabletAffiliate{ grid-column: 1/3; grid-row: 3; padding: 0 2em 1em; position: relative; margin: 0 auto; width: 60%; } /*Código para interfaz 'Valor por Pagar'*/ .mainContainerValuePay{ grid-column: 1 / 3; grid-row: 2 / 5; /*overflow-y: scroll;*/ } /****************************** *** END SECTION (CSS GRID) *** ******************************/ nav .brand-logo{ padding: 6px 19px !important; height: 64px!important; } .pagination li.active { background-color: #444; } .dc-color--sudmenu { background-color: #F0F0F8; } .dc-color--inputsearch{ background-color: #E0E4EB; color: #888888 ; } i.buscar{ color: #4e4e61 !important; margin-top: -7px !important; } .label-icon{ margin-top: -15px; } .importFile{ margin-top: -7px; } table{ margin: 10px 0; } .status{ width: 20px; height: 20px; border-radius: 50%; margin-left: 11px; } .custontextArea{ background: #f5fafd !important; overflow-y: scroll!important; height: 90px!important; max-height: 100px!important; padding: 2px 0 2px 0!important; } .first-row{ margin: 0; } .col-sin-padding{ padding: 0 !important; } .btn-custom--dc{ height: 65px; width: 65px; border-radius: 50%; padding-top: 14px !important; } .centrarDasBtn{ display: block; margin: 0 auto; width: 165px; } .btn-custom--dc p{ margin-top: -12px; font-size: 12px; } .btn-custom--dc img{ margin: 5%; height: 45px; } .circleU{ width: 90px !important; } .circleUser{ height: 80px; width: 80px; border-radius: 50%; margin-top: -22px; } .circleUser p{ color: white; font-size: 25px; padding-top: 8px; } .userTab h4 { font-size: 23px; padding: 15px 0 10px; } .userTab h3{ font-size: 45px; margin-bottom: -6px; font-weight:300; } .userTab h5{ font-size: 20px; margin-bottom: -6px } .panel__Deuda{ padding-top: 1px; height:150px; } .panel__Deuda2{ height: 118px; padding-top: 1px; } .panel__Deuda .deuda, .panel__Deuda2 .deuda{ font-weight: 600; margin: 10px; margin-bottom: 10px; } .panel__Deuda h2, .panel__Deuda2 h2{ margin-top: 35px; font-size: 28px; } .Personal-info{ margin-top: 10px; overflow-y: scroll; height: 200px; } .center-icon{ margin-top: 14px; } .nombre-deudor{ margin-top: 21px; } .switch label .leverCustom{ background-color: #84c7c1 !important; } span.lever.leverCustom::after { background-color: #26a69a !important; } .lista-obligaciones{ margin-top: 8%; } .textPagar{ margin-left: 13px; } .valorPagar{ margin: 14px; } .card-principal{ max-width: 560px; margin: auto; margin-top: 18px; padding: 0; } .cardEstadistica{ max-width: 500px !important; margin: auto !important; margin-top: 18px !important; padding: 0 !important; } .deuda { padding-top: 1px; } .secBotones { position: fixed !important; bottom: 40px; left: 6px; width: 66%; display: block; } .secBotones a{ padding-left: 0 !important; padding-right: 0 !important; margin: 10px 6px; } .areaTabala{ position: relative; } /* ** 1. Pagina de login */ .logi{ margin-top: 36px; margin-bottom: 18px; width: 90%; } .loginArea{ display: flex; } .login-section{ margin: 28px; margin-bottom: 5px; margin-top: -20px; padding: 4px 10px 0; border-radius: 20px; } .secLogin{ width: 50%; background: #307dfb; } .dc-background{ background: url("../img/login-background.jpg"); background-position: center; height: 100vh; background-size:cover; background-repeat: no-repeat; width: 50%; display: flex; } .angulo{ background: #307dfb; display: flex; width: 160px; margin-left: -80px; transform: skewx(-8deg); } .loglogin{ width: 100%; margin-top: 56px; margin-left: -35px; margin-bottom: 38px; } .loglogin h3{ text-align: left; } .loglogin p{ text-align: left !important; width: 431px; } .logpad{ margin: 0 !important; } .logpad i{ color: #000; opacity: 0.3; } .logpad2{ margin-bottom: 17px !important; } .login{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: 412px; position: relative; z-index: 5; } .sec-log-btn{ margin: 65px 0 20px; } .btn-login{ width: 96%; height: 50px; font-size: 18px; padding-left: 79px; padding-right: 28px; } .btn-login i { font-size: 36px; } .login object, .login img{ padding-bottom: 5%; margin-top: 30px; margin-bottom: 16px; } .areaLogForm{ border-radius: 20px; background: #ffffff; } .areaLogForm p{ text-align: center; font-size: 22px; } .copyR{ width: 500px; margin-top: 2px; margin-left: 37px; } .headIninicar{ height: 50px; font-size: 25px; font-weight: 300; background: #f5f5f5; color: #888888; padding-top: 6px; border-radius: 2px; } img.responsive-img { max-height: 140px; margin: 15px 0; } .pagoArea{ margin-top: 30px; } /* ** */ .titulo-Repor{ height: 40px; margin: 20px 0; } .titulo-Repor h5{ margin: 0; padding-top: 4px; font-weight: 300; } .buscadorReport{ background: #E8E8E8; box-shadow: none; height: 44px; } .buscadorReport .label-icon{ margin-top: 0; } /* * RECARGAS */ /*.dc-color-fondo{*/ /*background: #A1A1B2;*/ /*}*/ /* * PLANES */ .panel_plan{ background: #d1ebff; } .panel_plan h2{ padding: 20px 0; } /* * Tablas custom */ .tabla { /* display:block; height: 600px; overflow:auto;*/ margin-top: 86px; } /* * card estadistca */ .widget { margin: 0 auto; width:350px; margin-top:50px; background-color: #222D3A; box-shadow: 0 0 1px 0 #06060d; } .header{ background-color:#307DFC; color:white; text-align: center; border-top-left-radius: 2px; border-top-right-radius: 2px; font-weight: 400; padding: 5px; } .chart-container{ padding:25px; } /*.card-content {*/ /*padding: 24px;*/ /*border-radius: 0 0 2px 2px;*/ /*}*/ .titileCard{ font-size: 18px; font-weight: 400; margin-top: 0px; margin-bottom: 10px; } .input-field.inline { width: 70%; } /* * Planes */ .SecPlan{ height: 600px; padding: 0 !important; border-top-left-radius: 2px; border-top-right-radius: 2px; min-width: 200px; margin: 1% !important; } .titulo{ height: 42px; font-size: 20px; padding: 5px; border-top-left-radius: 2px; border-top-right-radius: 2px; } .secMensaje{ margin-top: 20%; text-align: center; } .planCard{ height: 40px; margin: 0 10px; border-radius: 2px; } .planCard p{ padding-top: 9px; padding-left: 15px; font-weight: 500; } .cardUserName{ padding: 15px 20px 5px; } .card-plan .row{ margin-bottom: 0 !important; } .card-plan__display{ padding: 10px 15px !important; } .card-plan__inicial, .card-plan__final{ padding-bottom: 5px; border-right: solid 1px #B2B2C4; border-left: solid 1px #E8E8E8; } .card-plan__inicial i, .card-plan__final i { margin-top: 13px; } .card-plan__inicial h5, .card-plan__final h5 { font-size: 22px; font-weight: 300; } .card-plan__inicial, .card-plan__final{ padding-bottom: 5px; } .card-plan__rango--cont{ padding: 0 !important; } .card-plan__periodo{ padding-top: 13px !important; } .card-plan__periodo h4{ font-size: 48px; font-weight: 500; margin-top: 13px; text-transform: uppercase; } .card-plan__periodo small{ font-size: 14px; font-weight: 500; text-transform: uppercase; margin-top: 15px; } .card-noticifar{ max-width: 520px; } .card-noticifar--imagen{ margin-top: 14px; } .card-noticifar--titulo p{ padding-left: 10px; } .sectionNotify{ background: rgb(255, 255, 255); box-shadow: -1px 1px 2px 0 #D9E0E5; } .grey-text { color: #9e9e9e !important; } .button { -moz-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none; } .cardsInformes{ margin: 0 !important; } .wysiwyg-toolbar-list { max-height: 16em; overflow: auto; overflow-x: hidden; overflow-y: scroll; } .wysiwyg-toolbar-list a, .wysiwyg-toolbar-list a:link, .wysiwyg-toolbar-list a:visited { display: block; color: black; padding: 5px 10px; text-decoration: none; cursor: pointer; } .wysiwyg-toolbar-list a:hover { color: HighlightText; background-color: Highlight; } /* CSS for the smiley plugin */ .wysiwyg-toolbar-smilies { padding: 10px; text-align: center; white-space: normal; } .wysiwyg-toolbar-smilies img { display: -moz-inline-stack; /* inline-block: http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */ display: inline-block; *display: inline; } .dropdown-content { overflow-y: visible; } .dropdown-content .dropdown-content { margin-left: -100%; } .tabla tr:hover{ background: #bacff1 !important; } tr.selected:hover { background-color: #307dfb !important; color: white; } .dropdown-subOptions { top: 65px !important; } .ingresarRecarga{ margin: -5px 0 -12px; } /*nav off-canvas*/ .lineaRN{ height: 67px; float: left; margin-left: 15px; margin-top: 10px; } .lineStatusDone{ background: rgba(0, 185, 165, 0.1); } .lineStatusFailed{ background: rgba(252, 15, 58, 0.1); } .lineStatusInProcess{ background: rgba(198, 203, 204, 0.1); } .lineStatusPending{ background: rgba(175, 182, 183, 0.1); } .lineStatusUnrealized{ background: rgba(152, 161, 163, 0.1); } .lineStatusCancelled{ background: rgba(130, 141, 143, 0.1); } .lineaRNredDark{ background: rgba(164, 172, 173, 0.1); } .lineTotalNotifications{ background: rgba(107, 116, 118, 0.1); } .barraNotificaciones{ margin-top: 20px; padding: 10px; height: 94px; } .barraNotificaciones h4{ font-size: 20px; margin-top: 0; margin-bottom: 8px; } .entregadas{ width: 80px; float: left; } .imEntrega i{ display: block; width: 20px; margin: 0 auto; } .imEntrega h6{ font-size: 13px; } .notificacionSalTo{ float: right; } .notificacionSalTo h5{ margin: 0; margin-top: -4px; } .notificacionSalTo h6, .imEntrega h6{ margin: 0; margin-top: 5px; } .icoFecha{ margin-top: 30px; } .cont{ padding: 10px 0 5px; } .logoDinero{ font-size: 50px; line-height: 59px; } .colorDinero{ background-color: #12003c; } .cont .row{ margin-bottom: 0; } .spacioRow{ margin-bottom: 5px !important; } .contenTabla{ margin-top: 15px; } .canGraf{ /*display: block;*/ max-width: 380px !important; max-height: 380px !important; margin: 0 auto; } .icoExcel{ height: 24px; color: #1d4b9a; } .icoDownload{ font-size: 24px; color: #1d4b9a; margin: 0 10px; } .circuloNoti{ height: 15px; margin-left: 10px; } .text-colorgris, .notificacionesDatos h4{ color:#737375; font-weight: 300; font-size: 14px; } .notificacionD{ padding-bottom: 1px; } .btnBuscarNo{ float: right; } .tagStatusNotifications{ border: solid 1px black; padding: 5px 10px; font-size: 13px; letter-spacing: .5px; color: black; } .tagDone{ border:solid 1.3px #00bfa5; color:#00bfa5; } .tagFailed{ border:solid 1.3px #fc0f3a; color:#fc0f3a; } .tagInProcess{ border:solid 1.3px #F9CA24; color:#F9CA24; } .tagPending{ border:solid 1.3px #F9CA24; color:#F9CA24; } .tagCancel{ border:solid 1.3px #63A6FF; color:#63A6FF; } .tagUnrealized{ border:solid 1.3px #63A6FF; color:#63A6FF; } .tagError{ border:solid 1.3px #071F4A; color:#071F4A; } /*.etiquetaTotalNotifications{*/ /*border: solid 1.3px #fad390;*/ /*color: #fad390;*/ /*}*/ /*Style for the Input of the phones (NotificationsReports)*/ .phoneNumberFilter{ height: 2.5rem !important; } .descargarReporteNoti{ display: inline; } .icoNotificacion{ height: 55px; } .icoNotificacionModal{ margin-top: -62px; margin-bottom: 15px; } .resumenConsumo{ margin-bottom: 20px; } .resumenConsumo h3{ font-size: 20px; } .resumenConsumo .row{ margin: 0; } .ValorConsumo{ display: flex; justify-content: space-between; } .ValorConsumo h4{ font-size: 24px; } .resumenConsumo .total{ font-size: 18px; margin-top: 5px; } .resumenConsumo .totalvalor{ font-size: 25px; } .containerPassword{ grid-column: 1 / 5; } .total, .totalvalor{ padding: 0; } .cortarText{ display: block; /* Fallback for non-webkit */ display: -webkit-box; max-width: 500px; /* Fallback for non-webkit */ margin: 0 auto; line-height: 1.5; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .tituloModalDescripcion img{ display: inline; } .tituloModalDescripcion h4{ display: inline; padding-top: 15px; margin-left: 16px; } .thTipo{ width: 7%; } .thFecha{ width: 11%; } .thEstado{ width: 12%; } .thPrecio{ width: 10%; text-align: right; padding:0 12px; } .thBusquda{ width: 6%; padding:0 12px; } .thNombre{ width: 20%; padding:0 12px; } .thDescripcion{ width: 34%; padding:0 12px; } .titleConsumo{ font-size: 18px; margin-bottom: 17px; padding-left: 5%; margin-top: 18px; } .cardsInformes{ color:#FFFFFF; max-width: 90%; margin-left: 5%; height: 130px; display: flex; flex-direction: column; } .cardsInformes:nth-of-type(1) { background: #2979FF; } .cardsInformes:nth-of-type(2) { background: #82B0FF; } .cardsInformes:nth-of-type(3) { background: #19499C; } .cardUserName, .panelPo { margin-top: 10px; height: 60px; } .cardUserName h4, .panelPo h4{ font-size: 20px; } .panelPo h4{ margin: 0 auto; } .notificacionBg{ height: 60vh; display: block; margin: 0 auto; } .notificacionText{ margin-top:35px; } .notificacionText h3{ font-size: 32px; margin-bottom: 5px; font-weight: 600; } .notificacionText p{ font-size: 21px; color: rgba(78, 78, 78, 0.53); font-weight: 300; margin-top: 0; } .tales{ animation-delay: 1s; animation-duration: 1s; } .tal{ animation-delay: .5s; } .cardPago{ padding:20px !important; } .tituloPago{ margin-top: 10px; margin-bottom: 30px; } .valorTotalPago{ font-size: 32px; margin-top: 20px; margin-bottom: 40px; } .referenciaPago{ font-size: 22px; margin-top: -8px; } .pagoMedio{ margin-top: 30px; } .circulo{ animation-delay: .5s; } #lineaDerecha{ animation-delay: 1.5s; animation-duration: 1.5s; } #lineaIzquierda{ animation-delay: 1.5s; animation-duration: 1.5s; } .AreaConfHead{ background: #3b3b4a !important; } .AreaConfHead li a{ color: #ffffff !important; } .AreaConf{ padding-bottom: 20px; margin-bottom: 65px; } /***SECTION FOR THE 'CARD' OF RECHARGES***/ .fixeHead{ position: fixed; width: 100%; } .recuadroRecargar{ height: 220px; width: 350px; display: block; margin: 20px auto; border-radius: 6px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); text-align: center; } .areaRecarga{ width: 775px; margin: 0 auto; } .textRecarga{ font-size: 30px; color: #2979FF; margin-bottom: 20px; margin-top: 80px; } .textRecargaValor{ font-size: 68px; padding: 30px 0 15px; color: #cccccc; } .recargaCustom{ font-size: 22px; padding: 20px 0 0; } .ingresarRecarga{ margin-bottom: 2px; } .ingresarRecarga > input{ text-align: right; font-size: 30px!important; margin-top: 20px!important; margin-bottom: 37px!important; color: #00bfa5!important; } .recuadroRecargar:hover{ background: #e0f7fa; } .recuadroRecargar h5:hover{ color: #00bfa5!important; } .cardRechargeValidityPolicies{ background-color: #ECF4FE; text-align: center; padding: 0 10px; font-size: 18px; font-weight: 300; border-radius: 2px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2); margin-top: 40px; } /***END SECTION CARD RECHARGES***/ .tileCampanaTabla{ font-size: 17px; font-weight: 500; margin: 0px!important; } .mensajeUsuario{ max-width: 960px; margin: 0 auto; border-radius: 3px; } .campanaEstado{ background: red; } .aroIcon{ background: #00acc1!important; color: white!important; height: 30px!important; width: 30px!important; border-radius: 50%!important; display: inline-block; float: right; margin-right: 7px; } .aroIcon2{ background: #00acc1!important; color: white!important; height: 40px!important; width: 40px!important; border-radius: 50%!important; display: inline-block; float: right; margin-right: 7px; } .aroIcon i{ line-height: 1.7!important; padding-left: 5.5px; font-size: 19px; } .aroIcon2 i{ line-height: 1.7!important; padding-left: 8.5px; font-size: 24px; } .colorIcoPer{ color: #999999; } .app-layout { display: grid; height: 95vh; grid-template-columns: 1fr 1fr 1fr ; grid-template-rows: 120px 1fr 260px; } .campana-text{ grid-column: 1; grid-row: 1; padding-left: 18px; background: #f8f8f8; } .campana-text p{ float: right; margin-right: 20px; } .campana-text h3{ font-size: 24px; margin-top: 40px; } .campana-text h4{ font-size: 18px; } .campana-Lista{ grid-column: 1; grid-row: 2; padding: 0 1em; overflow-y: scroll; } .capanaReportes{ grid-row: 1 / 3; grid-column: 2 / 4; } .cardEnviado, .cardFallidas, .cardTotal { display: flex; flex-wrap: wrap; flex-direction: row; width: 460px; height: 160px; border-radius: 3px; margin: 0 auto; margin-top: 20px; } .cardEnviado h4, .cardFallidas h4, .cardTotal h4{ padding-top: 22px; } .cardDatos{ width: 65%; } .cardDatosImg{ width: 35%; margin: 0 auto; padding-top: 22px; } .campana-list li{ padding: .5em; margin-top: 1em; margin-bottom: 1em; background-color: #f2f2f2; } .campana-Nombre-Usuario{ display: inline-block; height: 20px; } .campana-Icono-Usuario{ display: inline-block; } .alinear{ display: inline-block; width: 70%; } .capanaReportes{ display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; background: #e6edfb; } .aroIcon a{ color: white!important; } .aroIcon a i:hover{ color: #dedede; } canvas{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .politicaDC { background: rgb(8, 32, 64); color: white; padding-top: 5px; padding-right: 4%; height: 40px; z-index: 4; display: flex; justify-content: space-between; } .politicaDC a{ color: white; float:right; margin-right: 40px; margin-top: 7px; } .politicaDC a:hover { color: #2979FF !important; } .costoServicio{ font-size: 60px!important; } .terminos{ padding: 40px 60px 50px 60px; } .terminos .row{ margin: 0; } .aviso{ color: #fff; margin: 0; font-size: 22px; line-height: 2; padding-left: 50px; } .barraAviso{ width: 100%; height: 45px; } .carousel-item p{ margin-top: 0; } .carousel-item img{ height: 160px; margin-top: 30px; margin-bottom: 20px; } .cantidad-numero h4{ margin-top:1px; } /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .liContainerAddPeople{ padding-left: 50px!important; } .liContainerAddPeople i{ width: 25px!important; height: 25px!important; line-height: 25px!important; } .liContainerAddPeople span{ font-size: 14px!important; } .liContainerAddPeople p{ font-size: inherit; font-weight: bold; } .liContainerAddPeople a{ right: 7px!important; } /*** END CODE ***/ /********************************** *** START SECTION MEDIAQUERIES *** **********************************/ /* (1920x1080) Full HD Display */ @media (min-width: 1601px) and (max-width: 1920px) { /*Code for the 'Company' interface ***********************************/ /* element containing the table */ .modal h4 { font-size: 24px!important; } .cardVer{ display: none; } .FloatB{ display: none; } .s8{ width: 75% !important; } .sm4{ width: 25% !important; padding: 20px; } .contenedorCardsDerecho{ padding: 15px 40px 15px 14px; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ font-size: 18px; } /****************************************************************/ /*Code for the 'payment obligations' interface*/ .mainDiv{ width: 65%; margin: auto; } /****************************************************************/ } @media (min-width: 1441px) and (max-width: 1640px) { /*Code for the 'Company' interface ***********************************/ .panel__Deuda h2, .panel__Deuda2 h2 { font-size: 25px; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 70%; } /*Code for the 'payment obligations' interface*/ .mainDiv{ width: 80%; margin: auto; } } /* (1600x900) HD+ Display */ @media (min-width: 1441px) and (max-width: 1600px) { /*Code for the 'Company' interface ***********************************/ .cardVer{ display: none; } .FloatB{ display: none; } .contenedorCardsDerecho{ padding-right: 42px; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 80%; font-size: 18px; } } /* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1367px) and (max-width: 1440px){ /*Code for the 'Company' interface ***********************************/ .cardVer{ display: none; } .FloatB{ display: none; } .contenedorCardsDerecho{ padding-left: 0; } /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .liContainerAddPeople span{ font-size: 13px!important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 90%; font-size: 16px; } } /* ##Device = Desktops ##Screen = 1281px to higher resolution desktops */ @media (min-width: 1281px) and (max-width: 1366px) { /*Code for the 'Company' interface ***********************************/ .scrolling-wrapper{ display: none; } .cardVer{ display: none; } .FloatB{ display: none; } /* element containing the table */ .scroll-window{ height: 55vh !important; } .secBotones { left: 7.5px; } .panel__Deuda h2, .panel__Deuda2 h2 { margin-top: 35px; font-size: 22px; } .loglogin { margin-top: 5px!important; margin-bottom: 8px!important; } .areaLogForm { width: 360px!important; height: 410px!important; } .logi { margin-top: 20px; margin-bottom: 0; } .barra{ padding-bottom: 12px!important; } /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .liContainerAddPeople span{ font-size: 13px!important; } .liContainerAddPeople p{ font-size: small; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 95%; font-size: 16px; } /*Code for interface 'LogIn'*/ .containerLoginAffiliate div p{ font-size: 16px !important; } } /* ##Device = Laptops, Desktops ##Screen = B/w 1025px to 1280px */ @media (min-width: 1025px) and (max-width: 1280px) { /*Code for the 'Company' interface ***********************************/ body{ font-size: 14px; } .contenedorCardsDerecho{ padding-left: 0; } .btn-custom--dc{ width: 48px; height: 48px; padding-top: 1px !important; } .notificacionSection{ margin-top: 15px; overflow: unset; } .panel__Deuda h2, .panel__Deuda2 h2 { margin-top: 35px; font-size: 21px; } .secBotones a { padding-left: 0 !important; padding-right: 0 !important; margin: 10px 6px; } .panel__Deuda2 .deuda { font-weight: 600; margin: 13px; margin-bottom: 10px; } /*.minCardash{*/ /*height: 80px;*/ /*}*/ /*.minCardash h6{*/ /*font-size: 10px;*/ /*}*/ .imgCradDash{ height: 40px; } .card-stacked .valores{ font-size: 19px; } .card-stacked h6{ font-size: 12px; } .scrolling-wrapper{ display: none; } .FloatB{ display: none; } /* element containing the table */ .scroll-window{ height: 68vh !important; } .secBotones { left: 7.5px; } .inputCustonBack .buscar { padding-top: -8px!important; } /* element containing the table */ .scroll-window{ height: 56vh !important; } .loglogin { margin-top: 5px!important; margin-bottom: 8px!important; } .areaLogForm { width: 360px!important; height: 410px!important; } .logi { margin-top: 20px; margin-bottom: 0; } .icon-iconos_AddPlan:before { font-size: 28px; } .icon-iconos_notification:before { font-size: 28px; } .icon-iconos_EditePlan:before { font-size: 28px; } .icon-iconos_BagCash:before { font-size: 28px; } .icon-iconos_DeleteUser:before { font-size: 28px; } .icon-iconos_EditeUser:before { font-size: 28px; } .icon-iconos_AddUser:before { font-size: 28px; } /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .liContainerAddPeople{ padding: 10px!important; padding-left: 25px!important; } .liContainerAddPeople i{ left: 4px!important; width: 17px!important; height: 17px!important; line-height: 15px!important; font-size: 17px!important; } .liContainerAddPeople span{ font-size: 11px!important; } .liContainerAddPeople p{ font-size: small!important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ font-size: 16px; width: 90%; } } @media (min-width: 1116px) and (max-width: 1168px) { /*Code for the 'Company' interface ***********************************/ .panel__Deuda2 h2 { font-size: 23px; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 100%; font-size: 16px; } /*Code for interface 'LogIn'*/ .containerLoginAffiliate div p{ font-size: 16px !important; } } @media (min-width: 1000px) and (max-width: 1116px) { .panel__Deuda2 h2 { font-size: 20px; } /*.card-content{*/ /*padding: 6px!important;*/ /*}*/ /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .liContainerAddPeople{ padding: 10px!important; padding-left: 25px!important; } .liContainerAddPeople i{ left: 4px!important; width: 17px!important; height: 17px!important; line-height: 15px!important; font-size: 17px!important; } .liContainerAddPeople span{ font-size: 11px!important; } .liContainerAddPeople p{ font-size: small!important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 100%; } } /* ##Device = Tablets, Ipads (portrait) ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) { /*Code for the 'Company' interface ***********************************/ .scrolling-wrapper{ display: none; } .FloatB{ display: none; } .contenedorCardsDerecho{ padding-left: 0; } .panel__Deuda2 { height: 114px; } .panel__Deuda h2, .panel__Deuda2 h2{ font-size: 20px; } .cardRechargeValidityPolicies{ width: 90% !important; margin-left: 40px!important; } /*.imgIconPriceReportRecharge{*/ /*width: 35px!important;*/ /*}*/ /*.card-content{*/ /*padding: 2px!important;*/ /*}*/ /*.h5PriceReportRecharge{*/ /*font-size: 17px;*/ /*margin: 0.82rem 0 0.656rem 2px!important;*/ /*}*/ /*.card-action{*/ /*padding: 5px!important;*/ /*}*/ /*.card-action a{*/ /*font-size: 12px;*/ /*}*/ /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .containerRecipientsAffiliates, .containerAddedAffiliates{ width: 50% !important; } .liContainerAddPeople{ padding: 10px!important; padding-left: 25px!important; } .liContainerAddPeople i{ left: 4px!important; width: 17px!important; height: 17px!important; line-height: 15px!important; font-size: 17px!important; } .liContainerAddPeople span{ font-size: 11px!important; } .liContainerAddPeople p{ font-size: small!important; } .CardsInRe h5{ font-size: 11px!important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ width: 100%; } /*Code for interface 'LogIn'*/ .containerLoginAffiliate{ width: 80% !important; } .containerLoginAffiliate div p{ font-size: 16px!important; } .pass-Contenedor hr{ width: 80% !important; } /*The modals width*/ .modal{ width: 90% !important; height: 90% !important; } } /* ##Device = Tablets, Ipads (landscape) ##Screen = B/w 768px to 1024px */ @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { .scrolling-wrapper{ display: none; } .FloatB{ display: none; } .cardRechargeValidityPolicies{ width: 90% !important; margin-left: 40px!important; margin-top: 20px !important; } .CardsInRe h5{ font-size: 11px!important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ /*background-color: #ff00ff;*/ } /*The modals width*/ .modal{ width: 90% !important; height: 90% !important; } } /* ##Device = Low Resolution Tablets, Mobiles (Landscape) ##Screen = B/w 481px to 767px */ @media (min-width: 601px) and (max-width: 767px) { /*Code for the 'Company' interface ***********************************/ .textRecargaValor { font-size: 49px; } .recuadroRecargar { width: 270px; margin-bottom: 40px; margin-top: 20px; margin-left: auto; margin-right: auto; } /*Obligations Report (Reports Section)*/ .containerActivateFilters{ width: 100% !important; } .containerFiltersObligationsReport{ width: 100% !important; } .cardRechargeValidityPolicies{ width: 85% !important; margin-left: 43px!important; margin-top: 15px!important; } .card-content{ padding-left: 8px!important; padding-right: 8px!important; text-align: center; } .h5PriceReportRecharge{ font-size: 15px!important; } .div-a-priceReportRecharge{ padding-left: 8px!important; padding-right: 8px!important; } .a-priceReportRecharge{ font-size: 10px; margin-right: 5px!important; } /*.card-image{*/ /*width: 32px!important;*/ /*}*/ /*.card-content{*/ /*padding: 2px!important;*/ /*}*/ /*.h5PriceReportRecharge{*/ /*font-size: 15px!important;*/ /*margin: 0.82rem 0 0.656rem 0!important;*/ /*}*/ /*.card-action{*/ /*padding: 4px!important;*/ /*}*/ /*.card-action a{*/ /*font-size: 12px!important;*/ /*}*/ /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .containerRecipientsAffiliates, .containerAddedAffiliates{ width: 100% !important; } .CardsInRe h5{ font-size: 11px!important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ /*background-color: #b60eff;*/ width: 100%; padding: 8px; } /*Code for interface 'Value to Paid'*/ .elementStitcher{ width: 90%; margin: 0 auto; } .cardAmmount{ width: 541px !important; } /*Code for interface 'LogIn'*/ .pass-Contenedor hr{ width: 90% !important; } .containerLoginAffiliate{ width: 90% !important; } .containerLoginAffiliate div p{ font-size: 16px !important; } /*The modals width*/ .modal{ width: 90% !important; height: 90% !important; } } @media (min-width: 481px) and (max-width: 767px) { /*Code for the 'Company' interface ***********************************/ .menuGrid{ position: fixed; } .mainRechargeContainer{ grid-column: 1/3; grid-row: 1; position: static; } .scrolling-wrapper{ display: none; } .FloatB{ display: none; } .areaRecarga { margin: 0 auto; } .areaRecarga{ width: auto!important; margin: 0 auto; } /*Obligations Report (Reports Section)*/ .containerActivateFilters, .containerFiltersObligationsReport{ width: 100% !important; } .sinceDateFilter, .untilDateFilter, .activeOthersFilters{ width: 30% !important; } .filterStatusObligation, .filterStatusAffiliate, .filterNameAffiliate{ width: 30% !important; } .cardRechargeValidityPolicies{ width: 90% !important; font-size: 14px!important; margin-left: 25px!important; } .colorfondo--seccion-card{ display: none; } .mainContainerTableRechargeReport{ width: 100%!important; } /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .liContainerAddPeople span{ font-size: 12px!important; } .liContainerAddPeople p{ font-size: small!important; } /*The modals width*/ .modal{ width: 90% !important; height: 90% !important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ /*background-color: #5f00ff;*/ width: 100%; padding: 5px; } /*Code for interface 'LogIn'*/ .pass-Contenedor hr{ width: 95% !important; } .containerLoginAffiliate{ width: 95% !important; } .containerLoginAffiliate div p{ font-size: 14px !important; } /*Code for the 'payment obligations' interface*/ .item{ width: calc((100% - 5px) / 1) !important; } } @media (min-width: 481px) and (max-width: 600px) { /*Code for the 'Company' interface ***********************************/ .scrolling-wrapper{ display: none; } .FloatB{ display: none; } /*The modals width*/ .modal{ width: 90% !important; height: 90% !important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Value to Paid'*/ .elementStitcher{ width: 90%; margin: 0 auto; } .cardAmmount{ width: 431px !important; } .iconMoney{ width: 45px !important; padding: 0.6px !important; vertical-align: top !important; } .amountToBePaid{ font-size: 40px !important; } /*Code for the 'payment obligations' interface*/ .item{ width: calc((100% - 5px) / 1) !important; } } /* ##Device = Most of the Smartphones Mobiles (Portrait) ##Screen = B/w 320px to 479px */ @media (min-width: 320px) and (max-width: 480px) { /*Code for the 'Company' interface ***********************************/ .recuadroRecargar{ padding: 0!important; width: 282px; } .costoServicio{ font-size: 35px!important; margin: 0; } .terminosCopy{ display: contents; } .carouselMovil{ height: 346px!important; } .carouselMovil h2{ font-size:22px!important; } .carouselMovil img{ height: 122px !important; } .textRecarga { font-size: 23px!important; } .politicaDC a { margin: 7px 12px 0; } .logoCopy{ display: none; } .copyR{ display: none; } .recargarMov{ height: 230px!important; } .cardEmpresa{ display: none; } .empresaAvatar h6{ color: #ffffff; } .barraFondo{ display: none; } .tabla { height: 60vh; } .dc-background{ background: none; } .login{ width: 100%; padding-top: 0 } .btn-login{ padding: 0; } .btn-login i { margin-left: -40px!important; margin-right: 10px; } .white{ background-color: transparent !important; } .dc-background .z-depth-2{ box-shadow: none; } .loglogin{ margin-bottom: 40px; margin-left: 48%; } .loglogin object, .loglogin img{ width: 350px; } .areaLogForm{ width: 320px; margin-left: 100%; display: block; } .areaLogForm p{ margin-bottom: 0; } .pass-Fondo{ height: 100% !important; padding-bottom: 30px; } .pass-Contenedor{ width: 100% !important; margin-bottom: 60% !important; } .pass-Form{ width: 100% !important; background: white; margin-top: -210px!important; border-radius: 20px!important; } .pass-Form div a{ padding-top: 6px!important; } .pass-sec-boton{ display: none; } .pass-Contenedor h4{ margin-top: 30px!important; } .pass-Contenedor img{ width: 240px!important; margin-top: -30px !important; } .pass-Contenedor p{ font-weight: 400!important; font-size: 14px!important; padding: 0 12px; } .pas-link-index{ display: none!important; } /*nav off-canvas*/ nav{ position: fixed; z-index: 2; } .moTabWrap{ position: absolute; top: 120px; } .imgMovilEmpresa{ height: 48px!important; } .empresaAvatar{ background: #0E65D7; padding: 20px 2px; } /*.minCardash{*/ /*margin: 10px;*/ /*width: 142px;*/ /*padding: 10px;*/ /*display: flex;*/ /*flex-direction: column;*/ /*}*/ .alMovil{ display: flex; } .alMovil h6{ font-weight: 500; } .alMovil, .valMovil{ flex-direction: row; } .imgCradDash{ height: 30px; margin: 0 !important; margin-right: 5px !important; } .card-stacked .valores { font-size: 22px !important; } .scrolling-wrapper { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; margin-top: 56px; } .scrolling-wrapper::-webkit-scrollbar { display: none; } .cardVer { display: inline-block; } .cardVer:nth-of-type(2){ margin: -13px; } .btn-floating { padding: 0 !important; } .FloatB{ margin-right: 20px; position: fixed; margin-bottom: 10px; bottom: 0; right: 0; } .barrasGraficos{ display: none; } .secBotones{ display: none; } .btnMovil{ color: white !important; height: 40px; width: 110px; border-radius: 3px; margin-right: 20px; border:none; } td{ margin: 0 30px !important; } nav{ position: fixed; z-index: 2; } .moTabWrap{ position: absolute; top: 120px; } .imgMovilEmpresa{ height: 48px!important; } .empresaAvatar{ background: #0E65D7; padding: 20px 2px; } /*.minCardash{*/ /*margin: 10px;*/ /*width: 142px;*/ /*padding: 10px;*/ /*display: flex;*/ /*flex-direction: column;*/ /*}*/ .alMovil{ display: flex; } .alMovil h6{ font-weight: 500; } .alMovil, .valMovil{ flex-direction: row; } .imgCradDash{ height: 30px; margin: 0 !important; margin-right: 5px !important; } .card-stacked .valores { font-size: 22px !important; } .scrolling-wrapper { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: -ms-autohiding-scrollbar; margin-top: 56px; margin-bottom: 6px; } .scrolling-wrapper::-webkit-scrollbar { display: none; } .cardVer { display: inline-block; } .cardVer:nth-of-type(2){ margin: -13px; } .btn-floating { padding: 0 !important; } .FloatB{ margin-right: 20px; position: fixed; margin-bottom: 60px; bottom: 0; right: 0; z-index: 5; } .barrasGraficos{ display: none; } .secBotones{ display: none; } .recuadroRecargar { height: 180px; } .textRecargaValor { font-size: 55px; padding: 20px 0 5px; } .btnRechargesCard{ width: 55% !important; height: 35px!important; font-size: 14px!important; } .btnMovil{ color: white !important; height: 40px; width: 110px; border-radius: 3px; margin-right: 20px; border:none; } .cardEmpresa{ display: none; } .empresaAvatar h6{ color: #ffffff; } .barraFondo{ display: none; } .tabla { height: 60vh; } .dc-background{ background: none; } .login{ width: 100%; padding-top: 0; } .white{ background-color: transparent !important; } .dc-background .z-depth-2{ box-shadow: none; } .loglogin{ margin-bottom: 0; margin-top: 0!important; } .loglogin object, .loglogin img{ width: 220px; margin-top: 15px; } .login-section{ margin: 0; } /*.btn{*/ /*width: 80%;*/ /*height: 50px;*/ /*font-size: 20px;*/ /*}*/ td, th { width: 200px; } .areaRecarga { width: auto!important; margin: 0 auto!important; overflow: scroll!important; position: relative; max-height: 95vh; } /*Obligations Report (Reports Section)*/ .white{ background-color: #fff !important; } .icoFecha{ display: none; } .containerActivateFilters{ width: 100% !important; } .sinceDateFilter, .untilDateFilter, .activeOthersFilters{ width: 100% !important; } .colorfondo--seccion-card{ display: none; } .mainContainerTableRechargeReport{ width: 100%!important; } /*Container to add and select 'modal' affiliates (Massive Notifications)*/ .generalContainerModalMassiveNotifications{ padding: 2px!important; } .liContainerAddPeople{ padding: 10px!important; padding-left: 25px!important; } .liContainerAddPeople i{ left: 4px!important; width: 17px!important; height: 17px!important; line-height: 15px!important; font-size: 17px!important; } .liContainerAddPeople span{ font-size: 11px!important; } .liContainerAddPeople p{ font-size: small!important; } .card-content{ padding-left: 20px!important; } /*The modals width*/ .modal{ width: 90% !important; height: 90% !important; } /*Code for the 'Affiliates' interface *************************************/ /*Code for interface 'Obligations Pending'*/ .contentTabletAffiliate{ /*background-color: #09b0ff;*/ width: 100%; padding: 1px; } .btn-xSmall{ width: 100%; height: 33px; font-size: 9px; padding-left: 0; padding-right: 0; } .tr-xSmall{ font-size: 11px; } /*Code for interface 'Value to Paid'*/ .elementStitcher{ width: 98%; height: 50%; margin: 0 auto; } .containerAmmount{ height: 70% !important; } .cardAmmount{ width: 312px !important; height: 170px !important; } .nameAffiliate, .payValueDescription{ margin-left: 10px !important; } .nameAffiliate{ font-size: 26px !important; } .payValueDescription{ font-size: 16px !important; } .iconMoney{ width: 30px !important; margin-left: 10px !important; padding: 0.6px !important; vertical-align: top !important; } .iconMoney i{ font-size: 30px !important; } .amountToBePaid{ font-size: 25px !important; } .btn-payBalane-xSmall{ width: 60% !important; height: 35px !important; font-size: 17px !important; -webkit-border-radius: 5px !important; -moz-border-radius: 5px !important; border-radius: 5px !important; } /*Code for interface 'LogIn'*/ .pass-Contenedor{ margin-top: 20px !important; } .pass-Contenedor hr{ width: 95% !important; } .containerLoginAffiliate{ width: 95% !important; } .containerLoginAffiliate div p{ font-size: 12px !important; } .containerLoginAffiliate button{ width: 90%; height: 36px; font-size: 18px; border-radius: 6px; } /*Interfaz de respuesta para 'Pagos'*/ .general-container-payments-response{ width: 100%!important; } .card-payments-s-mobile{ width: 436px!important; } /*Code for the 'payment obligations' interface*/ .item{ width: calc((100% - 5px) / 1) !important; } .title-payment-response{ font-size: 2rem; } .title-payment-response ~ h5{ font-size: 1.3rem; } } /******************************** *** END SECTION MEDIAQUERIES *** ********************************/ .automatedNotificationSpanTitleDescription{ vertical-align: top !important; } .notifications{ width: 45px; height: 45px; border-radius: 30px; box-sizing: border-box; text-align: center; margin: 10px 15px 0; display: block; } .notifications:hover{ background-color: rgba(255,255,255,0.1); } .notifications .bellNotifica{ color: #ffffff; line-height: 42px; font-size: 30px; cursor: pointer; height: 45px; } .notifications:hover .bellNotifica, .notifications:hover .fasUser{ color: #f6f6f6; } .notifications .num{ position: absolute; margin-top: 10px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #ff2c74; color: #ffffff; line-height: 22px; text-align: center; font-family: sans-serif; } .notifications:hover .num{ position: relative; background: transparent; color: transparent; font-size: 24px; top: -4px; } .notifications:hover .num:after{ display: none; } .listaNotificaciones{ position: absolute; right: 5px; top: 64px; margin: 0; width: 460px; background: #ffffff; box-shadow: 0 5px 15px rgba(0,0,0,.5); box-sizing: border-box; border-radius: 12px; display: none; z-index: 5; overflow: hidden; } /*.notifications:hover .listaNotificaciones{*/ /*display: block;*/ /*}*/ .listaNotificaciones li{ list-style: none; border-bottom: 1px solid rgba(0,0,0,.1); padding: 8px 0; display: flex; width: 100%; } .listaNotificaciones li:last-child{ border-bottom: none; } .listaNotificaciones li .icon{ width: 35px; height: 35px; background-image: linear-gradient(-54deg, #1976D2 0%, #6200EA 100%); border-radius: 50%; text-align: center; line-height: 24px; margin-right: 15px; margin-top: 5px; margin-left: 15px; box-sizing: border-box; } .listaNotificaciones li .icon .fasUser{ color: #fff; font-size: 26px; line-height: 33px; } .listaNotificaciones li .text a{ color: #9f9f9f; padding: 0; } .listaNotificaciones li:hover .text a{ color: #307dfb; background: none; } .text p { line-height: 1.5; text-align: left; margin-top: 0; } .DatoInfo{ line-height: 10px; width: 80%; } .textFecha{ float: left; color: #8f8f8f !important; margin-bottom: 8px; font-weight: 500; } .verMAsAlert{ background: #f8f8f8; line-height: 2; overflow:hidden; } .verMAsAlert:hover{ background: #f1f1f1; } .verMAsAlert > a{ color: #8f8f8f; margin: 0 auto; letter-spacing: .5px; font-size: 16px; background: none; } .titleAlert > p{ color: white; padding-left: 20px; line-height: .3; letter-spacing: .5px; } .verMAsAlert > a:hover{ color: #307dfb; font-weight: 500; background: none; } .verMAsAlert a p{ margin: 0; } .rowAlert{ margin-bottom: 0; } .alertTitle{ font-size: 22px; color: #0D47A1; margin-left: 20px; padding: 30px 10px 10px; } .alertas-lista{ margin: 0 20px; } .iconAlert{ background-image: linear-gradient(-54deg, #1976D2 0%, #6200EA 100%); color: white; text-align: center; height: 50px; width: 50px; border-radius: 50%; } .iconAlertFont{ font-size: 36px; line-height: 45px !important; } .colTextFecha{ padding: 0 !important; } /* Code for the interface of the 'import process' (Importación)*/ .importacionesCard{ max-width: 368px; height: 390px; padding: 22px 6px; margin: 0 auto; display: block; } .importacionesDescription{ height: 250px; padding: 30px 63px; width: 70%; display: block; margin: 0 auto; margin-top: 10vh; } .importacionesDescription h3{ margin: 0; font-size: 28px; } .importacionesDescription p{ margin: 30px 0 30px; } .importacionesCard img{ width: 190px; height: 190px; } .importacionesCard:hover{ -webkit-box-shadow: -2px 4px 83px 0 rgba(135,189,237,1); -moz-box-shadow: -2px 4px 83px 0 rgba(135,189,237,1); box-shadow: -2px 4px 83px 0 rgba(135,189,237,1); } .espacioRow{ padding-top: 60px; margin-bottom: 0; } .imporCardUno h5, .imporCardDos h5{ font-size: 20px; margin-top: 28px; } .imporCardUno p, .imporCardDos p{ padding: 0 13%; margin-top: 25px; text-align: center; font-size: 16px ; color: #535353; } .imporCardTres, .imporCardCuatro{ background: #f4f4f4; cursor: not-allowed; } .imporCardTres:hover, .imporCardCuatro:hover{ box-shadow: none ; } .imporCardTres p, .imporCardCuatro p{ color: #bebebe; font-size: 16px; padding: 5% 11%; } .descriptionCardImport{ margin-top: 0 !important; padding: 0 !important; } /*.triangulo{*/ /*transform: rotateX(0);*/ /*}*/ /*.triangulo:before{*/ /*content: '';*/ /*border-style: solid;*/ /*border-width: 0 30px 30px 30px;*/ /*border-color: transparent transparent white transparent;*/ /*position: absolute;*/ /*left: 35px;*/ /*top: -30px;*/ /*}*/ /*Clases que se utilizarán para adicionar funcionalidad al triángulo*/ /********************************************************************/ /*.triangulito:before{*/ /*content: '';*/ /*border-style: solid;*/ /*border-width: 0 30px 30px 30px;*/ /*border-color: transparent transparent white transparent;*/ /*position: absolute;*/ /*left: 190px;*/ /*top: -30px;*/ /*}*/ /*.triangulitos:before{*/ /*content: '';*/ /*border-style: solid;*/ /*border-width: 0 30px 30px 30px;*/ /*border-color: transparent transparent white transparent;*/ /*position: absolute;*/ /*left: 520px;*/ /*top: -30px;*/ /*}*/ /*.triangulitose:before{*/ /*content: '';*/ /*border-style: solid;*/ /*border-width: 0 30px 30px 30px;*/ /*border-color: transparent transparent white transparent;*/ /*position: absolute;*/ /*left: 750px;*/ /*top: -30px;*/ /*}*/ /***END CODE 'import process' (Importación)***/ /*modal nuevo diseño*/ .modal-header{ height: 60px; } .modal-header h4{ padding-top: 14px; margin-left: 20px; font-weight: normal; } .modalIcono{ display: block; margin: 0 auto; width: 100px; margin-top: 53px; margin-bottom: 20px; } .modalIcono i{ font-size: 100px; color: #D8DADE; } .clienteEliminar h5{ color: #5a5959; margin-bottom: 20px; font-size: 24px; } .sec-footer{ padding-right: 30px !important; margin-bottom: 16px !important; } .waves-circle { width: 30px; height: 30px; background: #0288d1; background: -webkit-linear-gradient(45deg, #0288d1 0%, #26c6da 100%); background: linear-gradient(45deg, #0288d1 0%, #26c6da 100%); } .areaSecOpcionesAfiliados{ margin: 0 auto; margin-top: -30px; width: 80%; margin-bottom: 100px; } #modalAddAfiliado{ padding: 22px 10%; } #modalAddAfiliado .row{ margin-bottom: 0; } .modalAddAfilia{ padding: 5px 10% 10px !important; } .secEtiquetas p{ margin: 0; } .sectBtn{ padding: 22px 85px; } .headerSecAfi{ height: 60px; } .headerSecAfi h4{ margin: 0; } .headerSecAfi h4{ font-size: 24px; line-height: 60px; padding-left: 20px; } .back-btn{ border: 1.5px solid #1E88E5; border-radius: 0; opacity: .8; margin: 10px 20px 23px; padding:0 10px!important; height: 40px; width: 50px; } .back-btn i{ font-size: 26px; } .imgObligacionPen{ height:360px; margin: 0 auto; display: block; } .obligaPen{ padding-bottom: 40px; } .obligaPen h4{ font-size: 24px; color: #8a8a8a; line-height: 1.2; font-weight: 300; } .seleccionObligacion .dcTabs{ background: white; height: 98px; width: 400px; display: block; margin: 20px auto 0; position: relative; } .seleccionObligacion .dcTabs .dcTab{ float: left; display: block; } .dcTabs .dcTab{ width: 50%; } .dcTabs .dcTab>input[type="radio"] { position: absolute !important; top: -9999px !important; left: -9999px !important; } .dcTabs .dcTab>label { display: block; font-size: 13px; font-weight: 500; text-transform: uppercase; cursor: pointer; position: relative; color: #2979FF; border: 2px solid #2979FF; background: #ffffff; margin-left: 0 !important; height: 34px; border-top-right-radius: 5px; border-top-left-radius: 5px; padding-left: 10px; padding-top: 3px; } .dcTab label::before, .dcTab label::after{ visibility: hidden; } .content-personal p{ color:#8f8f8f; } #tab-user2, #tab-user{ color: #535353; margin-top: -2px; font-size: 17px !important; font-weight: 500; } .dcTabs .content { z-index: 0;/* or display: none; */ overflow: hidden; width: 400px; height: 61px; position: absolute; top: 34px; left: 0; color: #DFDFDF; opacity:0; transition: opacity 400ms ease-out; } .dcTabs >.dcTab>[id^="obligacion"]:checked + label { top: 0; background: #2979FF; color: #F5F5F5; border: 2px solid #144395; border-top-left-radius: 5px; } .dcTabs>.dcTab>[id^="obligacion"]:checked ~ [id^="tab-content"] { z-index: 1;/* or display: block; */ opacity: 1; transition: opacity 400ms ease-out; } .content-imagen, .content-personal{ display: block; float: left; } .content-cantidad{ float:right; } .content-imagen img{ padding: 8px 25px; } .content-personal{ margin-top: 7px; } .content-personal p, .content-cantidad p{ margin: 0; } .content-cantidad p{ color: #8f8f8f; } .content-cantidad{ padding-top: 3px; padding-right: 12px; margin-left: 16px; } .cantidad-numero{ margin-top: -3px; margin-left: 16px; } .cantidad-numero h4{ background: crimson; height: 22px; width: 32px; text-align: center; border-radius: 20px; padding-top: 4px; color:white; font-size: 14px; } .contenIzquierdo{ display: flex; flex-direction: column; } .forgetPassword:hover { } .pass-Fondo{ height: 100vh; background: #307dfb; padding-top: 4%; } .pass-Contenedor{ width: 630px; display: block; margin: 0 auto; margin-bottom: 70px; margin-top: 60px; } .pass-Contenedor h4{ font-size: 24px; color: white; font-weight: 300; margin-top: 50px; } .pas-link-index{ width: 500px!important; display: block; margin: 0 auto; } .pas-link-index a{ color: #dcdaea; letter-spacing: .5px; font-size: 16px; font-weight: 300; } .pas-link-index a:hover{ color: #32335b; letter-spacing: .5px; font-size: 16px; font-weight: 500; } .pass-Contenedor p{ font-size: 18px; color: #f6f6f6; margin-top: 30px; font-weight: 300; } .pass-sec-boton{ margin-top: -39px; padding-left: 52px; } .pass-btn--Regresar{ background: transparent; border: 1px solid #fff; } .pass-btn--Regresar:hover{ background: rgba(255, 255, 255, .2); } /*.tabFixed{*/ /*position: fixed;*/ /*width: 65.5%;*/ /*overflow: hidden;*/ /*display: flex;*/ /*flex-direction: column;*/ /*}*/ /*wrapper element so column padding doesn't affect fixed header background*/ .scroll-window-wrapper{ position:relative; margin-top: 0; } /* element containing the table */ .scroll-window{ min-height: auto!important; height: 69vh; overflow-x: hidden; /*overflow-y: scroll;*/ } .scroll-window table{ margin-bottom:0; } /*fixed header background*/ .scroll-window:before{ content:""; position: absolute; width:100%; height:52px; display: table; z-index: 1; background: #3b3b4a; } /*the actual fixed header*/ table.fixed-header th div{ position: absolute; margin-top: -.5rem; z-index: 11; } table.fixed-header thead tr{ height: 52px; } table.headTableCustom tr{ height:2.5rem; } .user-list{ width:100%; } .user-list td.text-right{ width:16rem; } /*-----experimental scrollbar styles-----*/ /* line 199, ../scss/main.scss */ #bodywrap ::-webkit-scrollbar { width: 1rem; } /* line 202, ../scss/main.scss */ #bodywrap ::-webkit-scrollbar-button { /* width:1rem;*/ } /* line 205, ../scss/main.scss */ #bodywrap ::-webkit-scrollbar-track { background-color: #dcdaea; border-left: 1px solid #ccc; padding-top: 60px !important; } /* line 212, ../scss/main.scss */ #bodywrap ::-webkit-scrollbar-thumb { height: 70px; background-color: #616161; border-radius:10px; } /* line 215, ../scss/main.scss */ #bodywrap ::-webkit-scrollbar-thumb:hover { background-color: #747474; } /*Pseudo-element 'hover' for the button 'Do you want to go back to the beginning?' (Recuperar Contraseña)*/ .returnToLogin:hover { color:#ffffff !important; } .cursorPointer{ cursor: pointer; } /*Code to customize the 'Select2' style ***************************************/ /*Styles for the 'input' or search field where you type the option to search or where the selected option is displayed*/ .select2 .selection .select2-selection--single, .select2-container--default .select2-search--dropdown .select2-search__field { border-width: 0 0 1px 0 !important; border-radius: 0 !important; height: 2.05rem; } /*Letter color on the options and other styles related to them.*/ .select2-results__option { color: #2979FF; padding: 8px 16px; font-size: 16px; } /*Background and letter color when hovering over an option and, letter color after an option is selected*/ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #f0f0f0 !important; color: #2979FF !important; } /*background applied to the option that was selected*/ .select2-container--default .select2-results__option[aria-selected=true] { background-color: #f7f7f7 !important; } /*shadow border to the container that is displayed*/ .select2-dropdown { border: none !important; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12); } /***END CODE (Select2)***/ /*Code to control visibility and transposition of the 'Feedback' container (hotjar)*/ #ads{ z-index: -1 !important; } /***END CODE (hojtar)***/ /***SECTION FOR 'IMPORT' INTERFACES***/ /*Styles for the interface of 'import notifications'*/ .display-contents { display: contents !important; } .move-top { margin-top: 60px; } .containerPreview{ background-color: #D9E0E5; color: black; height: 235px; margin-top: 10px; padding: 20px; border-radius: 8px; box-shadow: 2px -1px 2px 0 #D9E0E5; overflow: scroll; } .mailOption ~ label, .audioOption ~ label{ margin-right: 15px!important; } /*Radio-button color for 'email'*/ [type="radio"].with-gap.mailOption:checked+label:after { background-color: #00BFA5 !important; } [type="radio"].with-gap.mailOption:checked+label:before, [type="radio"].with-gap.mailOption:checked+label:after { border: 2px solid #00BFA5 !important; } /*Radio-button color for 'audio'*/ [type="radio"].with-gap.audioOption:checked+label:after { background-color: #FC0F3A !important; } [type="radio"].with-gap.audioOption:checked+label:before, [type="radio"].with-gap.audioOption:checked+label:after { border: 2px solid #FC0F3A !important; } /*Radio-button color for 'sms'*/ [type="radio"].with-gap.smsOption:checked+label:after { background-color: #F8CD30 !important; } [type="radio"].with-gap.smsOption:checked+label:before, [type="radio"].with-gap.smsOption:checked+label:after { border: 2px solid #F8CD30 !important; } .titleSubjectContainer, .titleOptionsSelectionContainer, .titleNotificationContent{ font-size: 12px; padding: 8px!important; } .inputSubjectContainer{ padding: 3px!important; } .inputSubjectContainer input{ color: black; width: 90% !important; font-size: 14px; height: 2rem!important; margin: 0 0 10px 0!important; } /***END SECTION 'IMPORT' INTERFACES***/ /***START CODE FOR SEARCH BAR FOR AFFILIATES SECTION***/ .options-radio-affiliate-filter-search{ margin-left: 15%; margin-top: 16px!important; } .options-radio-affiliate-filter-search .option-person-filter-search{ width: 40px; } .option-person-filter-search{ float: left; } .options-radio-affiliate-filter-search .option-person-filter-search>input[type="radio"] { position: absolute !important; top: -9999px !important; left: -9999px !important; } .options-radio-affiliate-filter-search .option-person-filter-search>label { display: block; font-size: 17px; font-weight: 500; text-transform: uppercase; cursor: pointer; position: relative; color: #2979FF; border: 2px solid #2979FF; background: #ffffff; margin-left: 0 !important; height: 39px; padding-left: 10px; padding-top: 7px; } .option-person-filter-search label::before, .option-person-filter-search label::after{ visibility: hidden; } .options-radio-affiliate-filter-search > .option-person-filter-search>[id^="input-search-"]:checked + label { top: 0; background: #2979FF; color: #F5F5F5; } /*Style for tags chips*/ .div-chips{ width: 82.7%; height: 1px; overflow-y: scroll; } .div-chips > div{ margin: 10px 2px 0 2px; } .div-chips > input{ height: 2rem!important; margin-left: 2px!important; } .label-search-icon{ margin-top: -21px!important; } /***END SECTION***/ /* SECTION FOR IMPORT STYLE */ .display-contents { display: contents !important; } .move-top { margin-top: 80px; } .card-content-default { padding: 0 !important; min-height: 200px; overflow-y: auto; max-height: 200px; } .card-image-default { border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 10px; } .card-image-font-default { font-size: 1.2em; font-weight: 400; } /*.carousel { height: 450px !important; }*/ .dropdown-content { overflow-y: auto !important; } .card__button--cursor-pointer { cursor: pointer; } .card__loader--hidden { display: none; margin: auto; } /* END SECTION */ /* SECTION FOR MASSIVE NOTIFICATIONS */ .collection .collection-item.avatar { min-height: 62px; } .collection-item.avatar { width: inherit; border-radius: 0; } .modal.modal-fixed-footer { width: 55%; } .modal.datepicker-modal { color: black; } .note-editor { margin-top: 8px; } .card-content-default { padding: 0 !important; min-height: 200px; overflow-y: auto; max-height: 200px; } .card-image-default { border-top-left-radius: 2px; border-top-right-radius: 2px; padding: 10px; } .card-image-font-default { font-size: 1.2em; font-weight: 400; } .card__button--cursor-pointer { cursor: pointer; } .modal__button--cursor-pointer { cursor: pointer; } .modal__button--right { float: right; } .card__card-content--less-padding { padding-top: 10px !important; padding-bottom: 10px !important; color: black; } .div-preview-area{ background-color: #F7F6F4; height: 95px; max-height: 95px; overflow-y: hidden; overflow-x: hidden; display: flex; justify-content: center; align-items: center; } .content-preview{ display:block!important; -webkit-transition:-webkit-transform 1s ease-out; -moz-transition:-moz-transform 1s ease-out; -o-transition:-o-transform 1s ease-out; -ms-transition:-ms-transform 1s ease-out; transition:transform 1s ease-out; padding: 10px; color: rgba(0, 0, 0, 0.38); vertical-align: top !important; } .content-preview:hover{ -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); filter: brightness(0.4); background-color: rgba(255, 254, 254, 0.25); color: rgba(0, 0, 0, 0.51); } .details-icon-preview{ z-index: 1; position: absolute; } /*.details-icon-preview a{*/ /*background-color: rgb(122, 216, 227); opacity: 0.5;*/ /*background-color: rgba(122, 216, 227, 0.5);*/ /*}*/ .aligned-icon{ margin-left: -28px; } .color-icon-pagination{ color: #E5E5E5; cursor: not-allowed; } .ul-container-added{ height: 485px; overflow-y: scroll; } .ul-container-recipient{ height: 373px; overflow-y: scroll; } /* END SECTION */ /* SECTION FOR 'WEEKLY-SHEDULE' */ .schedule-rows td { width: 80px; height: 30px; margin: 3px; padding: 5px; background-color: #3498DB; cursor: pointer; } .schedule-rows td:first-child { background-color: transparent; text-align: right; position: relative; } .schedule-rows td[data-selected], .schedule-rows td[data-selecting] { background-color: #E74C3C; } .schedule-rows td[data-disabled] { opacity: 0.55; } /* END CODE 'Weekly-Shedule' */ /*********************************************** *** END CODE VIEWS FOR MODULE (COMPANY) *** *********************************************** /----------------------------------------------------------------------------------------------------------------------- /***************************************************** *** CODE FOR VIEWS OF THE MODULE (AFFILIATES) *** *****************************************************/ /*Code for the view of 'LogIn' (Affiliates) *******************************************/ .login-form{ padding: 5%; box-shadow: 0 4px 4px 1px rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.02); float: none; margin: 0 auto; margin-top: 10vh; border-radius: 5px; text-align: center; background-color: white; } .containerPasswordAffiliate{ grid-column: 1 / 3; } .pass-Fondo{ height: 100vh !important; } .pass-Contenedor{ width: 100% !important; margin-bottom: 8% !important; } .pass-Contenedor hr{ width: 50%; } .containerLoginAffiliate{ width: 50%; } .containerLoginAffiliate div p{ font-size: 20px; } .containerLoginAffiliate div input{ margin-left: 0 !important; text-align: center; border: 1px solid #9e9e9e !important; border-radius: 6px !important; } .containerLoginAffiliate div label{ left: -1.50rem !important; margin-top: -10px !important; } /*Code for the view of 'Means of Payment' (Affiliates) ******************************************************/ .titleCardsSection{ font-size: 25px; color: #546e7a; margin-bottom: 8px; margin-top: 80px; } .card-title{ color: #263238; font-weight: bold !important; } .card-description{ color: #263238 !important; } .containerLinkPayment{ padding-bottom: 30px !important; } .spanContainerLink{ float: right; } /*.logoMeanPaymentPaypal{*/ /*width: 305px;*/ /*height: 112px;*/ /*}*/ /*.logoMeanPaymentBaloto{*/ /*width: 487px;*/ /*height: 130px;*/ /*}*/ /*.logoMeanPaymentEfecty{*/ /*width: 305px;*/ /*height: 112px;*/ /*}*/ /*.logoMeanPaymentPse{*/ /*width: 305px;*/ /*height: 112px;*/ /*}*/ /*Code for the view of 'total value pending payment' (Affiliates) *****************************************************************/ .containerAmmount{ width: 100%; height: 100%; margin: 100px auto; } .cardAmmount{ margin: 100px auto; width: 640px; height: 220px; background-color: #fff; border-radius: 7px; box-shadow: 0.3px 0.3px 0.3px 1px rgba(0, 0, 0, 0.2); font-family: 'Roboto', sans-serif; } .nameAffiliate, .payValueDescription{ color: gray; margin-left: 35px; } .nameAffiliate{ padding-top: 30px; font-size: 26px; } .payValueDescription{ font-size: 20px; line-height: 40px; } .iconMoney{ position: relative; display: inline-block; margin-left: 35px; width: 69px; /*height: auto;*/ background: #FFC107; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; padding: 9.6px; } .amountToBePaid{ display: inline-block; padding-left: 15px; font-size: 50px; } /**** Code for payment obligations section (Affiliates) ****/ /*Contenedor principal de las CARDS, en_US la cual se implementa el 'FlexBox'*/ .mainDiv{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; padding: 2em; } /*Contenedor hijo cuyos 'div' forman las cuadrículas del 'Flex-Box'*/ .item{ width: calc((100% - 10px) / 2); margin-bottom: 10px; display: flex; padding: 1px; } /*Último ítem de la cuadrícula generada por 'Flex-Box'*/ .item:last-child{ width: 100%;/*Adicionamos el 100% del ancho para que ocupe toda la última fila*/ } /*Clase para quitar la propiedad en_US bloque de los párrafos y así evitar que un elemento esté abajo de otro*/ .p-description{ display: inline; } /*Clase para el div que contiente toodo el contenido de las CARD, se hace para ocupar toodo el ancho de cada ítem*/ .container-content{ width: 100%; } /*Clase para adicionar propiedades al div que concierne al título de la CARD*/ .card-title-data{ background-color: #2979FF; padding: 5px!important; } .inline-icon { vertical-align: bottom; font-size: 22px !important; } /**** Código para la interfaz de Respuesta después de la transacción hecho por PayU ****/ /*Contenedor principal que contiene las cajas con 'Flex-box'*/ .mainDivPaymentResponse{ display: flex; flex-wrap: wrap; justify-content: center; } .itemcito{ /*width: 50%;*/ /*margin: 10px;*/ /*padding: 1px;*/ display: flex; } /*.itemcito div fieldset{*/ /*margin: 10px;*/ /*}*/ .fieldset-payments{ margin: 10px; height: 342px; display: inline-block; } /*.containerContentResponsePayment{*/ /*padding: 15px;*/ /*}*/ /*.iconResponsePayment{*/ /*color: limegreen;*/ /*}*/ /*.containerContentResponsePayment fieldset p{*/ /*margin: 5px 0;*/ /*}*/ /************************************************** *** END CODE VIEWS FOR MODULE (AFFILIATES) *** **************************************************/ .graphics-container{ display: flex; align-items: stretch; flex-wrap: wrap; justify-content: space-around; } .graphics-container div{ width: 100%; display: flex; } .chart-container{ position: relative; margin: auto; height: 90%; width: 95%; } .chart-container canvas{ max-height: 400px; } .carousel-price-dashboard{ height: 100% !important; border-radius: 3.5px; } .carrousel-dashboard-med-sma{ height: 280px!important; } .carrousel-dashboard-med-sma div h2{ height: 40px!important; margin-bottom: 0!important; } .carrousel-dashboard-med-sma div img{ height: 100px!important; margin-bottom: 0!important; margin-top: 5px!important; } .carrousel-dashboard-med-sma div p{ font-size: 45px!important; } .dash-container-une span { font-weight: bold; font-size: 0.9em; color: gray; display: block; } .dash-container-une { display: block !important; } .dash-container-une .bottom-link{ display: block; margin-bottom: 10px; }