Reac front end for psicometric app

all.css 42KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028202920302031203220332034203520362037203820392040204120422043204420452046204720482049205020512052205320542055205620572058205920602061206220632064206520662067206820692070207120722073207420752076207720782079208020812082208320842085208620872088208920902091209220932094
  1. *{
  2. text-decoration: none !important;
  3. outline: 0 !important;
  4. }
  5. .row {
  6. margin: 0 !important;
  7. padding: 0;
  8. }
  9. @font-face {
  10. font-family: gudea;
  11. src: url("../fonts/Gudea-Regular.ttf"); /* TTF file for CSS3 browsers */
  12. }
  13. body {
  14. -webkit-font-smoothing: antialiased;
  15. max-width: 100%;
  16. position: relative;
  17. margin: 0 auto;
  18. font-family: 'gudea';
  19. background: #f1f1f1;
  20. }
  21. .container-in {
  22. max-width: 1100px;
  23. margin: 0 auto;
  24. }
  25. /*
  26. DEMO STYLE
  27. */
  28. a,
  29. a:hover,
  30. a:focus {
  31. color: inherit;
  32. text-decoration: none;
  33. transition: all 0.3s;
  34. }
  35. .navbar {
  36. padding: 8px 10px;
  37. background: #ffff;
  38. border-bottom: 1px solid #ec5e69;
  39. border-radius: 0;
  40. margin-bottom: 40px;
  41. box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  42. height: 57px;
  43. }
  44. .navbar-btn {
  45. box-shadow: none;
  46. outline: none !important;
  47. border: none;
  48. }
  49. .line {
  50. width: 100%;
  51. height: 1px;
  52. border-bottom: 1px dashed #ddd;
  53. margin: 40px 0;
  54. }
  55. /* ---------------------------------------------------
  56. SIDEBAR STYLE
  57. ----------------------------------------------------- */
  58. .wrapper {
  59. display: flex;
  60. width: 100%;
  61. }
  62. #sidebar {
  63. width: 210px;
  64. position: fixed;
  65. top: 0;
  66. left: 0;
  67. height: 100vh;
  68. z-index: 999;
  69. background: #ffffff;
  70. color: #ec1c24;
  71. transition: all 0.3s;
  72. }
  73. #sidebar.active {
  74. margin-left: -250px;
  75. }
  76. #sidebar .sidebar-header {
  77. padding: 0;
  78. background: #ffffff;
  79. height: 57px;
  80. border-bottom: 1px solid #ec5e69;
  81. }
  82. .width_img {
  83. width: 120px;
  84. float: none;
  85. margin: auto;
  86. padding: 14px;
  87. }
  88. #sidebar ul.components {
  89. padding: 20px 0;
  90. border-bottom: 1px solid #ffffff;
  91. }
  92. #sidebar ul p {
  93. color: #fff;
  94. padding: 10px 30px;
  95. }
  96. #sidebar ul li a {
  97. padding: 10px 30px;
  98. font-size: .875rem;
  99. display: block;
  100. color: #25344f;
  101. }
  102. #sidebar ul li a:hover {
  103. color: #ffffff;
  104. background: rgb(253, 75, 75);
  105. }
  106. #sidebar ul li.active>a, a[aria-expanded="true"] {
  107. color: #fff!important;
  108. background: #fd4b4b;
  109. }
  110. #sidebar a[aria-expanded="true"] i {
  111. color: #ffffff!important;
  112. }
  113. #sidebar a[aria-expanded="true"]::after {
  114. color: #ffffff!important;
  115. }
  116. a[data-toggle="collapse"] {
  117. position: relative;
  118. }
  119. .dropdown-toggle::after {
  120. display: block;
  121. position: absolute;
  122. top: 50%;
  123. right: 20px;
  124. transform: translateY(-50%);
  125. color: #7c858f;
  126. }
  127. ul ul a {
  128. font-size: 0.9em !important;
  129. padding-left: 30px !important;
  130. background: #f1f1f1;
  131. }
  132. ul.CTAs {
  133. padding: 20px;
  134. }
  135. ul.CTAs a {
  136. text-align: center;
  137. font-size: 0.9em !important;
  138. display: block;
  139. border-radius: 5px;
  140. margin-bottom: 5px;
  141. }
  142. a.download {
  143. background: #fff;
  144. color: #7386D5;
  145. }
  146. a.article,
  147. a.article:hover {
  148. background: #6d7fcc !important;
  149. color: #fff !important;
  150. }
  151. /* ---------------------------------------------------
  152. CONTENT STYLE
  153. ----------------------------------------------------- */
  154. #content {
  155. width: calc(100% - 210px);
  156. padding: 0;
  157. min-height: 100vh;
  158. transition: all 0.3s;
  159. position: absolute;
  160. top: 0;
  161. right: 0;
  162. }
  163. #content.active {
  164. width: 100%;
  165. }
  166. /* ---------------------------------------------------
  167. MEDIAQUERIES
  168. ----------------------------------------------------- */
  169. @media (max-width: 768px) {
  170. #sidebar {
  171. margin-left: -250px;
  172. }
  173. #sidebar.active {
  174. margin-left: 0;
  175. }
  176. #content {
  177. width: 100%;
  178. }
  179. #content.active {
  180. width: calc(100% - 250px);
  181. }
  182. #sidebarCollapse span {
  183. display: none;
  184. }
  185. }
  186. .btncollapse {
  187. background:transparent;
  188. border: none;
  189. }
  190. .btncollapse i {
  191. color: #212529;
  192. cursor: pointer;
  193. font-size: 14px;
  194. }
  195. .btncollapse i:hover{
  196. color: #c3c3c3;
  197. transition: all 0.3s;
  198. }
  199. .content-section {
  200. padding: 0 30px;
  201. }
  202. .nav-item a i{
  203. color: #212529;
  204. }
  205. .nav-item a i:hover{
  206. color: #c3c3c3;
  207. transition: all 0.3s;
  208. }
  209. .rounded-pic {
  210. width: 35px;
  211. height: 35px;
  212. overflow: hidden;
  213. border-radius: 50%;
  214. background:#fff;
  215. }
  216. .rounded-pic img {
  217. width: 100%;
  218. }
  219. li.nav-item {
  220. margin: 0 10px;
  221. }
  222. .sidebar-header img {
  223. width: 100%;
  224. }
  225. .list-unstyled i{
  226. font-size: 14px;
  227. margin-right: 10px;
  228. }
  229. #mostafaDropdown::after {
  230. display: inline-block;
  231. width: 0;
  232. height: 0;
  233. margin-left: .255em;
  234. vertical-align: 0;
  235. content: "";
  236. border-top: .3em solid transparent;
  237. border-right: 0;
  238. border-bottom: .3em solid transparent;
  239. border-left: .3em solid;
  240. }
  241. .nav-item a {
  242. cursor: pointer;
  243. }
  244. .dropdown-menu {
  245. position: absolute;
  246. top: 100%;
  247. right: 3%;
  248. z-index: 1000;
  249. display: none;
  250. float: left;
  251. min-width: 10rem;
  252. padding: .5rem 0;
  253. margin: 0.125rem 0 0;
  254. font-size: 14px;
  255. color: #1b2235;
  256. text-align: left;
  257. list-style: none;
  258. background-color: #fff;
  259. background-clip: padding-box;
  260. border: 1px solid rgba(0,0,0,.15);
  261. width: 20%;
  262. }
  263. .main .panel {
  264. background: #ffffff;
  265. color: #25344f;
  266. margin-bottom: 30px;
  267. border-radius: 2px;
  268. width: 100%;
  269. float: left;
  270. border: 1px solid #dcdcdc;
  271. }
  272. .footerinfo p {
  273. font-size: 14px;
  274. color: #25344f;
  275. margin-left: 14px;
  276. }
  277. .main .panel h1 {
  278. font-size: 22px!important;
  279. color: #959595!important;
  280. text-transform: uppercase;
  281. font-family: 'gudea';
  282. letter-spacing: 7px;
  283. padding: 0!important;
  284. margin: 0!important;
  285. position: relative;
  286. top: 10px;
  287. }
  288. .breadcrumb-header {
  289. font-size: 20px;
  290. font-weight: 300;
  291. color: rgba(225,235,245,.8);
  292. margin-bottom: 24px;
  293. }
  294. .body-table {
  295. padding: 40px;
  296. background: #24344d;
  297. border-radius: 2px;
  298. box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 -1px 0 rgba(0,0,0,.02);
  299. }
  300. .body-table th {
  301. font-size: 14px;
  302. color: #fff;
  303. font-weight: 300!important;
  304. border-top: none!important;
  305. border-left: none!important;
  306. border-right: none!important;
  307. border-bottom: 1px solid #2e3f5b!important;
  308. color: rgba(225,235,245,.8);
  309. }
  310. .body-table tr {
  311. font-size: 14px;
  312. color: #fff;
  313. font-weight: 300;
  314. border-top: none!important;
  315. border-left: none!important;
  316. border-right: none!important;
  317. border-bottom: 1px solid #2e3f5b!important;
  318. background: #24344d!important;
  319. }
  320. .body-table td {
  321. border-top: none!important;
  322. border-left: none!important;
  323. border-right: none!important;
  324. border-bottom: 1px solid #2e3f5b!important;
  325. }
  326. .table-bordered {
  327. border-top: none!important;
  328. border-left: none!important;
  329. border-right: none!important;
  330. border-bottom: 1px solid #2e3f5b!important;
  331. }
  332. .table-striped tbody tr:nth-of-type(odd) {
  333. background-color: #24344d!important;
  334. }
  335. table.dataTable.display tbody tr.odd>.sorting_1, table.dataTable.order-column.stripe tbody tr.odd>.sorting_1 {
  336. background-color: #24344d!important;
  337. }
  338. table.dataTable.display tbody tr.even>.sorting_1, table.dataTable.order-column.stripe tbody tr.even>.sorting_1 {
  339. background-color: #24344d!important;
  340. }
  341. table.dataTable thead th, table.dataTable thead td {
  342. padding: 10px 0!important;
  343. border-bottom: 1px solid #111;
  344. }
  345. table.dataTable tfoot th, table.dataTable tfoot td {
  346. padding: 10px 0px!important;
  347. border-top: 1px solid #111;
  348. }
  349. table.dataTable tbody th, table.dataTable tbody td {
  350. padding: 10px 0px!important;
  351. }
  352. .body-table label {
  353. font-size: 14px;
  354. color: #b9c3ce;
  355. }
  356. .body-table select {
  357. padding: 5px;
  358. border: 1px solid #ffffff;
  359. background: #ffffff;
  360. color: #24344d;
  361. }
  362. .body-table input[type="search"] {
  363. border-radius: 4px;
  364. border: 1px solid #324462;
  365. box-shadow: none!important;
  366. color: #b9c3ce;
  367. background: #24344d;
  368. padding: 4px 12px;
  369. font-size: 14px;
  370. position: relative;
  371. margin-right: 10px;
  372. }
  373. .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{
  374. cursor: default;
  375. color: #b9c3ce!important;
  376. border: 1px solid transparent;
  377. background: transparent;
  378. box-shadow: none;
  379. }
  380. .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  381. color: #ffffff !important;
  382. border: 1px solid #2f4060;
  383. background-color: #1b2844;
  384. background: #1b2844!important;
  385. border-radius: 0;
  386. padding: 6px 15px;
  387. }
  388. .dataTables_wrapper .dataTables_paginate .paginate_button {
  389. box-sizing: border-box;
  390. display: inline-block;
  391. min-width: 1.5em;
  392. padding: 0.5em 1em;
  393. margin-left: 2px;
  394. text-align: center;
  395. text-decoration: none !important;
  396. cursor: pointer;
  397. *cursor: hand;
  398. color: #b9c3ce!important;
  399. border: 1px solid #2f4060;
  400. border-radius: 0px;
  401. padding: 6px 15px;
  402. }
  403. .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
  404. color: #b9c3ce;
  405. }
  406. .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  407. color: #fff !important;
  408. border: 1px solid #2f4060;
  409. background-color: #1b2844;
  410. background: #1b2844!important;
  411. border-radius: 0!important;
  412. padding: 6px 15px;
  413. transition: all 0.3s;
  414. }
  415. .btn_interactivo {
  416. width: 150px;
  417. text-align: center;
  418. margin-bottom: 40px;
  419. }
  420. .success_btn {
  421. border: 1px solid #2ec5d3;
  422. background: #2ec5d3;
  423. border-radius: 20px;
  424. color: #fff;
  425. font-size: 12px;
  426. }
  427. .success_btn a{
  428. display: block;
  429. padding: 10px;
  430. }
  431. .success_btn:hover {
  432. border: 1px solid #2ec5d3;
  433. background: transparent;
  434. color: #fff;
  435. transition: all 0.3s;
  436. }
  437. .panel p{
  438. font-size: 14px;
  439. color: #b9c3ce;
  440. margin:0;
  441. }
  442. .buscar_por {
  443. width: 20%;
  444. float: left;
  445. }
  446. .select_busqueda select {
  447. border-radius: 4px;
  448. border: 1px solid #324462;
  449. box-shadow: none!important;
  450. color: #b9c3ce;
  451. background: #24344d;
  452. padding: 4px 12px;
  453. font-size: 14px;
  454. width: 30%;
  455. position: relative;
  456. top: 5px;
  457. float: left;
  458. margin-right: 10px;
  459. }
  460. .select_busqueda input {
  461. border-radius: 4px;
  462. border: 1px solid #324462;
  463. box-shadow: none!important;
  464. color: #b9c3ce;
  465. background: #24344d;
  466. padding: 4px 12px;
  467. font-size: 14px;
  468. width: 65%;
  469. position: relative;
  470. top: 5px;
  471. float: left;
  472. margin-right: 10px;
  473. }
  474. .select_busqueda {
  475. width: 60%;
  476. float: left;
  477. margin-right: 10px;
  478. }
  479. .tabla_results {
  480. width: 100%;
  481. float: left;
  482. padding: 50px 0;
  483. }
  484. .tabla_results th{
  485. font-size: 14px;
  486. color: #fff;
  487. font-weight: 300!important;
  488. border-top: none!important;
  489. border-left: none!important;
  490. border-right: none!important;
  491. border-bottom: 1px solid #2e3f5b!important;
  492. color: rgba(225,235,245,.8);
  493. }
  494. .tabla_results tr {
  495. font-size: 14px;
  496. color: #fff;
  497. font-weight: 300;
  498. border-top: none!important;
  499. border-left: none!important;
  500. border-right: none!important;
  501. border-bottom: 1px solid #2e3f5b!important;
  502. background: #24344d!important;
  503. }
  504. .tabla_results td{
  505. border-top: none!important;
  506. border-left: none!important;
  507. border-right: none!important;
  508. border-bottom: 1px solid #2e3f5b!important;
  509. }
  510. .select_tienda .btn_interactivo {
  511. width: 150px;
  512. text-align: center;
  513. margin-bottom: 40px;
  514. float: left;
  515. }
  516. .buscar_por p{
  517. position: relative;
  518. top: 5px;
  519. }
  520. .select_tienda p{
  521. width: 100%;
  522. float: left;
  523. }
  524. .select_busqueda input::placeholder {
  525. color: #b9c3ce;
  526. opacity: 1; /* Firefox */
  527. }
  528. .select_busqueda input:-ms-input-placeholder { /* Internet Explorer 10-11 */
  529. color: #b9c3ce;
  530. }
  531. .select_busqueda input::-ms-input-placeholder { /* Microsoft Edge */
  532. color: #b9c3ce;
  533. }
  534. .colnopadd {
  535. padding: 0!important;
  536. }
  537. .icon_text {
  538. text-align: center;
  539. width: 40px;
  540. height: 40px;
  541. padding: 7px;
  542. border-radius: 50%;
  543. float: none;
  544. margin: auto;
  545. }
  546. .icon_text p{
  547. font-size: 17px;
  548. color: #fff;
  549. margin: 0;
  550. }
  551. .activity .red {
  552. background: #ec5e69;
  553. }
  554. .activity .green {
  555. background: #5eec8c;
  556. }
  557. .activity .blue {
  558. background: #5e7aec;
  559. }
  560. .activity .purple {
  561. background: #9f7ce1;
  562. }
  563. .activity {
  564. width: 100%;
  565. float: left;
  566. margin: 20px 0;
  567. }
  568. .activity_title {
  569. padding: 0;
  570. }
  571. .panel canvas{
  572. width:100% !important;
  573. }
  574. .vermasnotificaciones {
  575. width: 100%;
  576. float: left;
  577. }
  578. .vermasnotificaciones .success_btn {
  579. border: 1px solid #2ec5d3;
  580. background: #2ec5d3;
  581. border-radius: 20px;
  582. color: #fff;
  583. font-size: 12px;
  584. width: 190px;
  585. text-align: center;
  586. }
  587. .vermasnotificaciones .success_btn:hover {
  588. border: 1px solid #2ec5d3;
  589. background: transparent;
  590. color: #fff;
  591. transition: all 0.3s;
  592. }
  593. .generar_reporte {
  594. width: 100%;
  595. float: left;
  596. margin: 30px 0;
  597. }
  598. .generar_reporte .success_btn {
  599. border: 1px solid #2ec5d3;
  600. background: #2ec5d3;
  601. border-radius: 20px;
  602. color: #fff;
  603. font-size: 12px;
  604. width: 10%;
  605. text-align: center;
  606. }
  607. .generar_reporte .success_btn:hover {
  608. border: 1px solid #2ec5d3;
  609. background: transparent;
  610. color: #fff;
  611. transition: all 0.3s;
  612. }
  613. .list-unstyled .active i {
  614. color: #ffffff;
  615. }
  616. .img-container {
  617. width: 90px;
  618. height: 90px;
  619. overflow: hidden;
  620. float: none;
  621. margin: auto;
  622. }
  623. .img-container img {
  624. width: 100%;
  625. }
  626. .botones_interactivos {
  627. width: 33.33%;
  628. float: left;
  629. text-align: left;
  630. margin: 20px 0 0;
  631. }
  632. .botones_interactivos i {
  633. color: #b9c3ce;
  634. transition: all 0.3s;
  635. cursor: pointer;
  636. }
  637. .botones_interactivos i:hover {
  638. color: #ec5e69;
  639. transition: all 0.3s;
  640. }
  641. *[tooltip] {
  642. position: relative;
  643. display: inline-block;
  644. cursor: pointer;
  645. }
  646. *[tooltip]:after, *[tooltip]:before {
  647. visibility: hidden;
  648. position: absolute;
  649. margin: 0;
  650. z-index: 98;
  651. }
  652. *[tooltip]:before {
  653. border-style: solid;
  654. border-color: rgba(0, 0, 0, 0.74) transparent;
  655. content: "";
  656. }
  657. *[tooltip]:after {
  658. background: rgba(0, 0, 0, 0.74);
  659. border-radius: 5px;
  660. color: #fff;
  661. content: attr(tooltip);
  662. padding: 5px 15px;
  663. font-size: 80%;
  664. }
  665. *[tooltip]:before, *[tooltip][tooltip-location="bottom"]:before {
  666. border-width: 0 6px 6px 6px;
  667. bottom: auto;
  668. top: 20px;
  669. left: 50%;
  670. }
  671. *[tooltip]:after, *[tooltip][tooltip-location="bottom"]:after {
  672. left: 0px;
  673. top: 26px;
  674. }
  675. *[tooltip][tooltip-location="top"]:before {
  676. border-width: 6px 6px 0px 6px;
  677. top: auto;
  678. bottom: 20px;
  679. }
  680. *[tooltip][tooltip-location="top"]:after {
  681. top: auto;
  682. bottom: 26px;
  683. }
  684. *[tooltip][tooltip-location="right"]:before {
  685. border-width: 6px 6px 0px 6px;
  686. top: 50%;
  687. left: 100%;
  688. transform: rotate(90deg);
  689. }
  690. *[tooltip][tooltip-location="right"]:after {
  691. top: -10%;
  692. left: calc(100% + 9px);
  693. }
  694. *[tooltip][tooltip-location="left"]:before {
  695. border-width: 6px 6px 0px 6px;
  696. top: 50%;
  697. right: 100%;
  698. left: auto;
  699. transform: rotate(-90deg);
  700. }
  701. *[tooltip][tooltip-location="left"]:after {
  702. top: -10%;
  703. left: auto;
  704. right: calc(100% + 9px);
  705. }
  706. *[tooltip]:hover:after, *[tooltip]:hover:before {
  707. visibility: visible;
  708. }
  709. *[tooltip][tooltip-animate]:before, *[tooltip][tooltip-animate]:after, *[tooltip][tooltip-animate][tooltip-location="bottom"]:before, *[tooltip][tooltip-animate][tooltip-location="bottom"]:after {
  710. margin: 10px 0px 0px 0px;
  711. }
  712. *[tooltip][tooltip-animate][tooltip-location="top"]:before, *[tooltip][tooltip-animate][tooltip-location="top"]:after {
  713. margin: 0px 0px 10px 0px;
  714. }
  715. *[tooltip][tooltip-animate][tooltip-location="right"]:before, *[tooltip][tooltip-animate][tooltip-location="right"]:after {
  716. margin: 0px 0px 0px 10px;
  717. }
  718. *[tooltip][tooltip-animate][tooltip-location="left"]:before, *[tooltip][tooltip-animate][tooltip-location="left"]:after {
  719. margin: 0px 10px 0px 0px;
  720. }
  721. *[tooltip][tooltip-animate]:after, *[tooltip][tooltip-animate]:before {
  722. transition: all 0.3s ease;
  723. opacity: 0;
  724. }
  725. *[tooltip][tooltip-animate]:hover:after, *[tooltip][tooltip-animate]:hover:before {
  726. margin: 0;
  727. opacity: 1;
  728. }
  729. *[tooltip][tooltip-size="small"]:after {
  730. width: 50px;
  731. }
  732. *[tooltip]:after, *[tooltip][tooltip-size="medium"]:after {
  733. width: 150px;
  734. }
  735. *[tooltip][tooltip-size="large"]:after {
  736. width: 250px;
  737. }
  738. .main_list_products{
  739. display: block;
  740. }
  741. .main_productos{
  742. display: none;
  743. }
  744. .colgrilla i{
  745. color: #b9c3ce;
  746. transition: all 0.3s;
  747. }
  748. .colgrilla {
  749. width: 18px;
  750. float: left;
  751. margin-right: 10px;
  752. }
  753. .colgrilla a{
  754. cursor: pointer;
  755. }
  756. .colgrilla .activar_vista i{
  757. color: #2ec5d3;
  758. transition: all 0.3s;
  759. }
  760. .colgrilla i:hover{
  761. color: #2ec5d3;
  762. transition: all 0.3s;
  763. }
  764. .add_producto {
  765. width: 150px;
  766. text-align: center;
  767. margin-bottom: 40px;
  768. float: right;
  769. }
  770. .btn_add_producto {
  771. border: 1px solid #2ec5d3;
  772. background: #2ec5d3;
  773. border-radius: 20px;
  774. color: #fff;
  775. font-size: 12px;
  776. }
  777. .btn_add_producto:hover {
  778. border: 1px solid #2ec5d3;
  779. background: transparent;
  780. color: #fff;
  781. transition: all 0.3s;
  782. }
  783. .btn_add_producto a {
  784. display: block;
  785. padding: 10px;
  786. }
  787. .modal-header {
  788. display: -ms-flexbox;
  789. display: block;
  790. -ms-flex-align: initial;
  791. align-items: flex-start;
  792. -ms-flex-pack: justify;
  793. justify-content: space-between;
  794. padding: 1rem;
  795. border-bottom: 1px solid #e9ecef;
  796. border-top-left-radius: .3rem;
  797. border-top-right-radius: .3rem;
  798. }
  799. .modal-title {
  800. font-size: 16px;
  801. font-weight: normal;
  802. color: rgb(97, 97, 97);
  803. }
  804. .modal-content {
  805. position: relative;
  806. display: -ms-flexbox;
  807. display: flex;
  808. -ms-flex-direction: column;
  809. flex-direction: column;
  810. width: 100%;
  811. pointer-events: auto;
  812. background-color: #fff;
  813. background-clip: padding-box;
  814. border: 1px solid rgba(0,0,0,.2);
  815. border-radius: 2px;
  816. outline: 0;
  817. }
  818. .custom-file-upload-hidden {
  819. display: none;
  820. visibility: hidden;
  821. position: absolute;
  822. left: -9999px;
  823. }
  824. .custom-file-upload {
  825. display: block;
  826. width: auto;
  827. font-size: 16px;
  828. margin-top: 30px;
  829. }
  830. .custom-file-upload label {
  831. display: block;
  832. margin-bottom: 5px;
  833. }
  834. .file-upload-wrapper {
  835. position: relative;
  836. margin-bottom: 5px;
  837. }
  838. .file-upload-input {
  839. width: 50%;
  840. font-size: 12px;
  841. padding: 8px;
  842. color: #b5b5b5;
  843. border: none;
  844. background-color: #c0392b00;
  845. -moz-transition: all 0.2s ease-in;
  846. -o-transition: all 0.2s ease-in;
  847. -webkit-transition: all 0.2s ease-in;
  848. transition: all 0.2s ease-in;
  849. float: left;
  850. border-bottom: 1px solid #c8c8c875;
  851. }
  852. .file-upload-input:hover, .file-upload-input:focus {
  853. background-color: transparent;
  854. outline: none;
  855. border-bottom: 1px solid #2ec5d37d;
  856. }
  857. .file-upload-button {
  858. cursor: pointer;
  859. display: inline-block;
  860. color: #fff;
  861. font-size: 10px;
  862. text-transform: uppercase;
  863. padding: 11px;
  864. border: 1px solid transparent;
  865. border-radius: 30px;
  866. margin-left: 0px;
  867. background-color: #2ec5d3;
  868. float: left;
  869. -moz-transition: all 0.2s ease-in;
  870. -o-transition: all 0.2s ease-in;
  871. -webkit-transition: all 0.2s ease-in;
  872. transition: all 0.2s ease-in;
  873. width: 50%;
  874. }
  875. .file-upload-button:hover {
  876. border: 1px solid #2ec5d3;
  877. background: transparent;
  878. color: #2ec5d3;
  879. transition: all 0.3s;
  880. }
  881. .close {
  882. float: right;
  883. font-size: 1.5rem;
  884. font-weight: normal;
  885. line-height: 1;
  886. color: #ec5e69;
  887. text-shadow: 0 1px 0 #fff;
  888. opacity: 1;
  889. }
  890. .data_product input {
  891. width: 100%;
  892. float: left;
  893. border-radius: 4px;
  894. box-shadow: none;
  895. border: 1px solid #2ec5d3;
  896. padding: 8px 20px;
  897. font-size: 12px;
  898. color: #bebebe;
  899. margin-bottom: 10px;
  900. background: transparent;
  901. }
  902. .add_producto_confirm {
  903. width: 150px;
  904. text-align: center;
  905. margin-bottom: 40px;
  906. float: right;
  907. }
  908. .btn_add_producto_confirm {
  909. border: 1px solid #2ec5d3;
  910. background: #2ec5d3;
  911. border-radius: 20px;
  912. color: #fff;
  913. font-size: 12px;
  914. }
  915. .btn_add_producto_confirm:hover {
  916. border: 1px solid #2ec5d3;
  917. background: transparent;
  918. color: #2ec5d3!important;
  919. transition: all 0.3s;
  920. }
  921. .btn_add_producto_confirm a {
  922. display: block;
  923. padding: 10px;
  924. }
  925. [type=reset], [type=submit], button, html [type=button] {
  926. -webkit-appearance: initial;
  927. }
  928. .cancel_producto_confirm {
  929. width: 150px;
  930. text-align: center;
  931. margin-bottom: 40px;
  932. }
  933. .btn_cancelar {
  934. border: 1px solid #2ec5d3;
  935. background: #2ec5d3;
  936. border-radius: 20px;
  937. color: #fff;
  938. font-size: 12px;
  939. }
  940. .btn_cancelar:hover {
  941. border: 1px solid #2ec5d3;
  942. background: transparent;
  943. color: #2ec5d3!important;
  944. transition: all 0.3s;
  945. }
  946. .btn_cancelar a {
  947. display: block;
  948. padding: 10px;
  949. }
  950. .delet_producto_confirm {
  951. width: 150px;
  952. text-align: center;
  953. margin-bottom: 40px;
  954. float: right;
  955. }
  956. .btn_delete_producto_confirm {
  957. border: 1px solid #ec5e69;
  958. background: #ec5e69;
  959. border-radius: 20px;
  960. color: #fff;
  961. font-size: 12px;
  962. }
  963. .btn_delete_producto_confirm:hover {
  964. border: 1px solid #ec5e69;
  965. background: transparent;
  966. color: #ec5e69!important;
  967. transition: all 0.3s;
  968. }
  969. .btn_delete_producto_confirm a {
  970. display: block;
  971. padding: 10px;
  972. }
  973. .modal-body .alert {
  974. font-size: 15px;
  975. text-transform: uppercase;
  976. text-align: center;
  977. color: #f1c205;
  978. margin-bottom: 0;
  979. }
  980. .modal-body .text-alert {
  981. font-size: 14px;
  982. text-align: center;
  983. color: #9f9f9f;
  984. }
  985. .rounded-pic-lock {
  986. width: 90px;
  987. height: 90px;
  988. overflow: hidden;
  989. border-radius: 50%;
  990. background: #fff;
  991. float: none;
  992. margin: auto;
  993. }
  994. .rounded-pic-lock img {
  995. width: 100%;
  996. }
  997. section.lockscreen {
  998. background: #f1f1f1;
  999. width: 100%;
  1000. height: 100%;
  1001. }
  1002. .lockscreen h1 {
  1003. font-size: 21px;
  1004. color: #25344f;
  1005. text-align: center;
  1006. margin: 20px 0 6px;
  1007. }
  1008. .lockscreen p {
  1009. font-size: 14px;
  1010. color: #25344f;
  1011. text-align: center;
  1012. margin: 0;
  1013. }
  1014. .password-again {
  1015. width: 340px;
  1016. float: none;
  1017. margin: auto;
  1018. padding-top: 40px;
  1019. }
  1020. .add_password {
  1021. width: 110px;
  1022. text-align: center;
  1023. margin-bottom: 40px;
  1024. float: right;
  1025. }
  1026. .btn_add_password {
  1027. border: 1px solid #fd4b4b;
  1028. background: #fd4b4b;
  1029. border-radius: 0 4px 4px 0;
  1030. color: #fff;
  1031. font-size: 13px;
  1032. }
  1033. .btn_add_password a {
  1034. display: block;
  1035. padding: 10px;
  1036. cursor: pointer;
  1037. }
  1038. .btn_add_password:hover {
  1039. border: 1px solid #d91212;
  1040. background: #d91212;
  1041. color: #fff;
  1042. transition: all 0.3s;
  1043. }
  1044. .password-again input {
  1045. border: 1px solid #fd4b4b;
  1046. background: transparent;
  1047. padding: 9px 11px;
  1048. font-size: 14px;
  1049. width: 230px;
  1050. color: #fff;
  1051. }
  1052. .lockscreen{
  1053. display: table;
  1054. height:200px;
  1055. }
  1056. .pantallabloqueada {
  1057. display: table-cell;
  1058. vertical-align: middle;
  1059. }
  1060. #elementos i {
  1061. color: #25344f;
  1062. }
  1063. .error_page{
  1064. display: table;
  1065. height:200px;
  1066. }
  1067. .page_notfound {
  1068. display: table-cell;
  1069. vertical-align: middle;
  1070. }
  1071. section.error_page {
  1072. background: #f1f1f1;
  1073. width: 100%;
  1074. height: 100%;
  1075. }
  1076. .error_page h1 {
  1077. font-size: 150px;
  1078. font-weight: 400;
  1079. color: #fd4b4b;
  1080. text-align: center;
  1081. margin: 20px 0 6px;
  1082. }
  1083. .error_page p {
  1084. font-size: 14px;
  1085. color: #25344f;
  1086. text-align: center;
  1087. margin: 0;
  1088. }
  1089. .error_page h3 {
  1090. font-size: 30px;
  1091. color: #25344f;
  1092. text-align: center;
  1093. margin: 0;
  1094. }
  1095. .inicio_sesion {
  1096. background-image: url(../images/login.png);
  1097. background-size: cover;
  1098. background-repeat: no-repeat;
  1099. width: 100%;
  1100. height: 100%;
  1101. }
  1102. .page_login {
  1103. padding: 0 50px;
  1104. height: 100%;
  1105. width: 100%;
  1106. }
  1107. .form_login {
  1108. height: 100%;
  1109. width: 400px;
  1110. padding: 30px 60px;
  1111. float: right;
  1112. background: #24344d;
  1113. }
  1114. .logo {
  1115. position: relative;
  1116. margin-top: 55px;
  1117. width: 190px;
  1118. float: none;
  1119. }
  1120. .logo img {
  1121. width: 100%;
  1122. }
  1123. .form_login p {
  1124. color: #fff;
  1125. font-size: 14px;
  1126. position: relative;
  1127. margin-top: 40px;
  1128. }
  1129. .form_login input {
  1130. border-radius: 4px;
  1131. border: 1px solid #324462;
  1132. box-shadow: none!important;
  1133. color: #b9c3ce!important;
  1134. background: #24344d;
  1135. padding: 4px 12px;
  1136. font-size: 14px;
  1137. width: 100%;
  1138. position: relative;
  1139. top: 5px;
  1140. float: left;
  1141. margin-top: 10px;
  1142. }
  1143. button.login_btn {
  1144. margin-top: 40px;
  1145. width: 100%;
  1146. background: #2ec5d3;
  1147. border: 1px solid transparent;
  1148. padding: 5px;
  1149. border-radius: 2px;
  1150. cursor: pointer;
  1151. color: #fff;
  1152. transition: all 0.3s;
  1153. }
  1154. button.login_btn:hover {
  1155. border: 1px solid #2ec5d3;
  1156. background: transparent;
  1157. color: #2ec5d3;
  1158. transition: all 0.3s;
  1159. }
  1160. .forgot_password a{
  1161. color: #fff;
  1162. text-decoration: underline!important;
  1163. transition: all 0.3s;
  1164. }
  1165. .forgot_password a:hover{
  1166. color: #2ec5d3;
  1167. transition: all 0.3s;
  1168. }
  1169. .form_login .footerinfo p {
  1170. font-size: 14px;
  1171. color: #fff;
  1172. position: absolute;
  1173. bottom: 0;
  1174. margin: 30px 0;
  1175. }
  1176. .contenedor_restore {
  1177. width: 400px;
  1178. float: none;
  1179. margin: auto;
  1180. }
  1181. .contenedor_restore .logo {
  1182. position: relative;
  1183. width: 190px;
  1184. float: none;
  1185. margin: auto;
  1186. }
  1187. .form_restore h1 {
  1188. font-size: 16px;
  1189. font-weight: 400;
  1190. color: #25344f;
  1191. text-align: center;
  1192. margin: 20px 0 6px;
  1193. }
  1194. .form_restore {
  1195. padding: 40px;
  1196. }
  1197. button.restore_btn {
  1198. margin-top: 20px;
  1199. width: 100%;
  1200. border: 1px solid #fd4b4b;
  1201. background: #fd4b4b;
  1202. padding: 5px;
  1203. border-radius: 2px;
  1204. cursor: pointer;
  1205. color: #fff;
  1206. transition: all 0.3s;
  1207. }
  1208. button.restore_btn:hover {
  1209. border: 1px solid #d91212;
  1210. background: #d91212;
  1211. color: #fff;
  1212. transition: all 0.3s;
  1213. }
  1214. .form_restore input {
  1215. width: 100%;
  1216. position: relative;
  1217. margin-top: 10px;
  1218. color: #25344f;
  1219. margin-bottom: 0;
  1220. background: transparent;
  1221. padding: 5px 15px;
  1222. border-top: 0;
  1223. border-left: 0;
  1224. border-right: 0;
  1225. border-bottom: 1px solid #ec1c245c;
  1226. }
  1227. .data_product select {
  1228. width: 100%;
  1229. float: left;
  1230. border-radius: 4px;
  1231. box-shadow: none;
  1232. border: 1px solid #2ec5d3;
  1233. padding: 8px 20px;
  1234. font-size: 12px;
  1235. color: #bebebe;
  1236. margin-bottom: 10px;
  1237. }
  1238. .body-table td a {
  1239. background: #2ec5d3;
  1240. border:1px solid transparent;
  1241. color: #fff;
  1242. padding: 8px 20px;
  1243. border-radius: 20px;
  1244. transition: all 0.3s;
  1245. }
  1246. .body-table td a:hover {
  1247. background: transparent;
  1248. border: 1px solid #2ec5d3;
  1249. color: #fff;
  1250. transition: all 0.3s;
  1251. }
  1252. .ver_producto {
  1253. background: #2ec5d3;
  1254. border: 1px solid transparent;
  1255. color: #fff;
  1256. padding: 8px 20px;
  1257. border-radius: 20px;
  1258. transition: all 0.3s;
  1259. }
  1260. .ver_producto:hover {
  1261. background: transparent;
  1262. border: 1px solid #2ec5d3;
  1263. color: #fff;
  1264. transition: all 0.3s;
  1265. }
  1266. .editar_producto {
  1267. background: #5893df!important;
  1268. border: 1px solid transparent;
  1269. color: #fff;
  1270. padding: 8px 20px;
  1271. border-radius: 20px;
  1272. transition: all 0.3s;
  1273. }
  1274. .editar_producto:hover {
  1275. background: transparent!important;
  1276. border: 1px solid #5893df!important;
  1277. color: #fff;
  1278. transition: all 0.3s;
  1279. }
  1280. .eliminar_producto {
  1281. background: #ec5e69!important;
  1282. border: 1px solid transparent;
  1283. color: #fff;
  1284. padding: 8px 20px;
  1285. border-radius: 20px;
  1286. transition: all 0.3s;
  1287. }
  1288. .eliminar_producto:hover {
  1289. background: transparent!important;
  1290. border: 1px solid #ec5e69!important;
  1291. color: #fff;
  1292. transition: all 0.3s;
  1293. }
  1294. .col-left {
  1295. width: 50%;
  1296. float: left;
  1297. }
  1298. .col-right {
  1299. width: 50%;
  1300. float: left;
  1301. }
  1302. .col-left p {
  1303. font-size: 14px;
  1304. }
  1305. .col-right p {
  1306. font-size: 14px;
  1307. }
  1308. .col-left select{
  1309. width: 99%;
  1310. }
  1311. .data_product textarea {
  1312. overflow: auto;
  1313. resize: none;
  1314. width: 100%;
  1315. font-size: 13px;
  1316. padding: 10px 20px;
  1317. border: 1px solid #2ec5d3;
  1318. border-radius: 4px;
  1319. margin-bottom: 20px;
  1320. }
  1321. .ver_lista_productos{
  1322. width: 100%;
  1323. float: left;
  1324. border-radius: 4px;
  1325. box-shadow: none;
  1326. border: 1px solid #2ec5d3;
  1327. padding: 8px 20px;
  1328. font-size: 12px;
  1329. color: #bebebe;
  1330. margin-bottom: 10px;
  1331. background: transparent;
  1332. }
  1333. .notification_body {
  1334. padding: 10px 0;
  1335. border-bottom: 1px solid #2e3f5b;
  1336. }
  1337. .notification_body span {
  1338. background: #ec5e69;
  1339. padding: 4px 10px;
  1340. border-radius: 30px;
  1341. color: #fff;
  1342. }
  1343. .panel_time_notification{
  1344. text-align: right;
  1345. }
  1346. .panel_time_notification a p:hover{
  1347. color: #ec5e69;
  1348. transition: all 0.3s;
  1349. }
  1350. .data_notification h1{
  1351. font-size: 16px;
  1352. font-weight: normal;
  1353. color: rgb(97, 97, 97);
  1354. }
  1355. .data_notification p{
  1356. font-size: 14px;
  1357. font-weight: normal;
  1358. color: rgb(97, 97, 97);
  1359. }
  1360. .body_drop_notification h1{
  1361. font-size: 16px;
  1362. font-weight: normal;
  1363. color: rgb(97, 97, 97);
  1364. }
  1365. .body_drop_notification p{
  1366. font-size: 14px;
  1367. font-weight: normal;
  1368. color: rgb(97, 97, 97);
  1369. }
  1370. .body_drop_notification span {
  1371. background: #ec5e69;
  1372. padding: 4px 10px;
  1373. border-radius: 30px;
  1374. color: #fff;
  1375. }
  1376. .body_drop_notification {
  1377. border-bottom: 1px solid #2e3f5b24;
  1378. height: 90px;
  1379. overflow: hidden;
  1380. }
  1381. .dropdown_noti {
  1382. height: 280px;
  1383. padding: 20px 4px;
  1384. overflow: hidden;
  1385. overflow-y: scroll;
  1386. }
  1387. .body_drop_message h1{
  1388. font-size: 16px;
  1389. font-weight: normal;
  1390. color: rgb(97, 97, 97);
  1391. }
  1392. .body_drop_message p{
  1393. font-size: 14px;
  1394. font-weight: normal;
  1395. color: rgb(97, 97, 97);
  1396. }
  1397. .body_drop_message {
  1398. height: 90px;
  1399. overflow: hidden;
  1400. border-bottom: 1px solid #2e3f5b24;
  1401. }
  1402. .dropdown_noti {
  1403. height: 280px;
  1404. padding: 20px 4px;
  1405. overflow: hidden;
  1406. overflow-y: scroll;
  1407. }
  1408. .nav-item.active a i {
  1409. color: #ec5e69;
  1410. }
  1411. .body_drop_message:after{
  1412. width: 100%;
  1413. }
  1414. .body_drop_message:before{
  1415. display: none;
  1416. }
  1417. .panel_mensajes a {
  1418. display: block;
  1419. height: 85px;
  1420. overflow: hidden;
  1421. transition: all 0.3s;
  1422. padding: 6px;
  1423. }
  1424. .panel_mensajes a:hover {
  1425. background: #1a223326;
  1426. transition: all 0.3s;
  1427. }
  1428. .contact_body {
  1429. height: 100%;
  1430. border-bottom: 1px solid #2e3f5b;
  1431. }
  1432. .panel_mensajes {
  1433. height: 710px;
  1434. overflow: hidden;
  1435. overflow-y: scroll;
  1436. }
  1437. .panel_mensajes::-webkit-scrollbar {
  1438. background: transparent;
  1439. }
  1440. .panel_mensajes::-webkit-scrollbar:vertical {
  1441. width: 1em;
  1442. }
  1443. .panel_mensajes::-webkit-scrollbar:horizontal {
  1444. height: 0;
  1445. }
  1446. .panel_mensajes::-webkit-scrollbar-thumb {
  1447. background-color: rgba(0, 0, 0, 0.3);
  1448. border-radius: 99999px;
  1449. border: .3125em solid transparent;
  1450. background-clip: content-box;
  1451. }
  1452. .panel_mensajes::-webkit-scrollbar {
  1453. background: transparent;
  1454. }
  1455. .panel_mensajes::-webkit-scrollbar:vertical {
  1456. width: 1em;
  1457. }
  1458. .panel_mensajes::-webkit-scrollbar:horizontal {
  1459. height: 0;
  1460. }
  1461. .panel_mensajes::-webkit-scrollbar-thumb {
  1462. background-color: rgba(0, 0, 0, 0.3);
  1463. border-radius: 99999px;
  1464. border: .3125em solid transparent;
  1465. background-clip: content-box;
  1466. }
  1467. .dropdown_noti::-webkit-scrollbar {
  1468. background: transparent;
  1469. }
  1470. .dropdown_noti::-webkit-scrollbar:vertical {
  1471. width: 1em;
  1472. }
  1473. .dropdown_noti::-webkit-scrollbar:horizontal {
  1474. height: 0;
  1475. }
  1476. .dropdown_noti::-webkit-scrollbar-thumb {
  1477. background-color: rgba(0, 0, 0, 0.3);
  1478. border-radius: 99999px;
  1479. border: .3125em solid transparent;
  1480. background-clip: content-box;
  1481. }
  1482. .dropdown_noti::-webkit-scrollbar {
  1483. background: transparent;
  1484. }
  1485. .dropdown_noti::-webkit-scrollbar:vertical {
  1486. width: 1em;
  1487. }
  1488. .dropdown_noti::-webkit-scrollbar:horizontal {
  1489. height: 0;
  1490. }
  1491. .dropdown_noti::-webkit-scrollbar-thumb {
  1492. background-color: rgba(0, 0, 0, 0.3);
  1493. border-radius: 99999px;
  1494. border: .3125em solid transparent;
  1495. background-clip: content-box;
  1496. }
  1497. .chatleft{
  1498. width: 100%;
  1499. float: left;
  1500. }
  1501. .chatright{
  1502. width: 100%;
  1503. float: left;
  1504. }
  1505. .panel_conversation {
  1506. height: 710px;
  1507. }
  1508. .conversation_body {
  1509. height: 480px;
  1510. overflow: hidden;
  1511. overflow-y: scroll;
  1512. }
  1513. .conversation_body::-webkit-scrollbar {
  1514. background: transparent;
  1515. }
  1516. .conversation_body::-webkit-scrollbar:vertical {
  1517. width: 1em;
  1518. }
  1519. .conversation_body::-webkit-scrollbar:horizontal {
  1520. height: 0;
  1521. }
  1522. .conversation_body::-webkit-scrollbar-thumb {
  1523. background-color: rgba(0, 0, 0, 0.3);
  1524. border-radius: 99999px;
  1525. border: .3125em solid transparent;
  1526. background-clip: content-box;
  1527. }
  1528. .conversation_body::-webkit-scrollbar {
  1529. background: transparent;
  1530. }
  1531. .conversation_body::-webkit-scrollbar:vertical {
  1532. width: 1em;
  1533. }
  1534. .conversation_body::-webkit-scrollbar:horizontal {
  1535. height: 0;
  1536. }
  1537. .conversation_body::-webkit-scrollbar-thumb {
  1538. background-color: rgba(0, 0, 0, 0.3);
  1539. border-radius: 99999px;
  1540. border: .3125em solid transparent;
  1541. background-clip: content-box;
  1542. }
  1543. .burbuja.left {
  1544. width: 50%;
  1545. background: #00000026;
  1546. padding: 20px;
  1547. border-radius: 50px;
  1548. float: left;
  1549. }
  1550. .burbuja p{
  1551. font-size: 11px;
  1552. color: #b9c3ce8c;
  1553. margin: 0;
  1554. }
  1555. .burbuja h1 {
  1556. font-size: 14px;
  1557. color: #b9c3ce;
  1558. }
  1559. .burbuja.right {
  1560. width: 50%;
  1561. background: #00000026;
  1562. padding: 20px;
  1563. border-radius: 50px;
  1564. float: right;
  1565. }
  1566. .box_message {
  1567. width: 100%;
  1568. padding: 10px 0;
  1569. }
  1570. .box_message textarea {
  1571. overflow: auto;
  1572. resize: none;
  1573. width: 100%;
  1574. border: 1px solid #2e3f5b;
  1575. background: transparent;
  1576. color: #fff;
  1577. font-size: 14px;
  1578. padding: 10px;
  1579. height: 130px;
  1580. }
  1581. .enviar_mensaje {
  1582. width: 100%;
  1583. float: left;
  1584. margin: 45px 0;
  1585. }
  1586. .enviar_mensaje .send_btn {
  1587. border: 1px solid #2ec5d3;
  1588. background: #2ec5d3;
  1589. border-radius: 20px;
  1590. color: #fff;
  1591. font-size: 12px;
  1592. width: 100%;
  1593. text-align: center;
  1594. }
  1595. .send_btn a {
  1596. display: block;
  1597. padding: 10px;
  1598. }
  1599. .enviar_mensaje .send_btn:hover {
  1600. border: 1px solid #2ec5d3;
  1601. background: transparent;
  1602. color: #fff;
  1603. transition: all 0.3s;
  1604. }
  1605. .panel_mensajes .active {
  1606. background: #1a223352;
  1607. transition: all 0.3s;
  1608. }
  1609. .panel .col-md-6 input {
  1610. width: 100%;
  1611. float: left;
  1612. border-radius: 4px;
  1613. box-shadow: none;
  1614. border: 1px solid #2ec5d3;
  1615. padding: 8px 20px;
  1616. font-size: 12px;
  1617. color: #bebebe;
  1618. margin-bottom: 10px;
  1619. background: transparent;
  1620. }
  1621. .inputs_config {
  1622. width: 100%;
  1623. float: left;
  1624. margin: 40px 0;
  1625. }
  1626. .inputs_config label {
  1627. width: 100%;
  1628. float: left;
  1629. color: #b4bcca;
  1630. }
  1631. .boton_guardar_info {
  1632. width: 150px;
  1633. float: right;
  1634. text-align: center;
  1635. }
  1636. #elementos:hover i {
  1637. color: #fff;
  1638. transition: all 0.3s;
  1639. }
  1640. .dropdown-toggle:hover::after {
  1641. transition: all 0.3s;
  1642. color: #ffffff;
  1643. }
  1644. li.cabecera_li {
  1645. color: #cbcbcb;
  1646. padding: 12px 30px 10px;
  1647. font-size: 12px;
  1648. font-weight: bold;
  1649. }
  1650. .content-section .main .panel .col-md-6 i {
  1651. font-size: 35px;
  1652. color: #fd4b4b;
  1653. width: 50%;
  1654. float: left;
  1655. text-align: center;
  1656. position: relative;
  1657. top: 8px;
  1658. }
  1659. .panel .content_info p {
  1660. font-size: 34px;
  1661. color: #25344f;
  1662. margin: 0;
  1663. text-align: right;
  1664. width: 50%;
  1665. float: left;
  1666. position: relative;
  1667. top: 0px;
  1668. }
  1669. .content-section .main h1 {
  1670. font-size: 27px;
  1671. padding: 0 15px;
  1672. color: #949494;
  1673. }
  1674. .main .panel a {
  1675. width: 100%;
  1676. height: 100%;
  1677. display: block;
  1678. transition: all 0.3s;
  1679. }
  1680. .main .panel a:hover {
  1681. transition: all 0.3s;
  1682. -webkit-box-shadow: 0px 0px 28px -5px rgba(10,10,10,0.24);
  1683. -moz-box-shadow: 0px 0px 28px -5px rgba(10,10,10,0.24);
  1684. box-shadow: 0px 0px 28px -5px rgba(10,10,10,0.24);
  1685. }
  1686. .body_tabs {
  1687. padding: 45px 20px;
  1688. }
  1689. .header_historial {
  1690. background: #d7d7d7;
  1691. padding: 10px;
  1692. border: 1px solid #dcdcdc;
  1693. }
  1694. .header_historial i{
  1695. color: #fff;
  1696. float: left;
  1697. margin-right: 20px;
  1698. }
  1699. .header_historial p{
  1700. margin: 0!important;
  1701. padding: 0;
  1702. line-height: 1;
  1703. color: #fff;
  1704. letter-spacing: 5px;
  1705. }
  1706. .content_historial {
  1707. background: #fff;
  1708. border: 1px solid #dcdcdc;
  1709. padding: 20px;
  1710. }
  1711. .content_historial p {
  1712. padding: 0;
  1713. margin: 0 0 20px 0;
  1714. line-height: 1;
  1715. font-size: 14px;
  1716. color: #25344f;
  1717. }
  1718. .cabeceras {
  1719. background: #f1f1f1;
  1720. padding: 10px;
  1721. }
  1722. .col20 {
  1723. width: 20%;
  1724. float: left;
  1725. -ms-flex: 0 0 20%;
  1726. flex: 0 0 20%;
  1727. max-width: 20%;
  1728. }
  1729. .col25{
  1730. width: 25%;
  1731. float: left;
  1732. -ms-flex: 0 0 25%;
  1733. flex: 0 0 25%;
  1734. max-width: 25%;
  1735. }
  1736. .cabeceras .col20 p{
  1737. padding: 0;
  1738. margin: 0;
  1739. line-height: 1;
  1740. font-size: 14px;
  1741. color: #25344f;
  1742. }
  1743. .data_candidato p{
  1744. padding: 0;
  1745. margin: 0;
  1746. line-height: 1;
  1747. font-size: 14px;
  1748. color: #25344f;
  1749. }
  1750. .data_candidato {
  1751. padding: 10px;
  1752. border-bottom: 1px solid #f1f1f1;
  1753. }
  1754. .data_candidato a:hover {
  1755. color: #fd4b4b;
  1756. transition: all 0.3s;
  1757. }
  1758. .cabecera_recently {
  1759. background: #eceff1;
  1760. padding: 10px;
  1761. border: 1px solid #dcdcdc;
  1762. }
  1763. .cabecera_recently i {
  1764. color: #607d8b;
  1765. float: left;
  1766. margin-right: 20px;
  1767. }
  1768. .cabecera_recently p{
  1769. margin: 0!important;
  1770. padding: 0;
  1771. line-height: 1;
  1772. color: #607d8b;
  1773. letter-spacing: 5px;
  1774. }
  1775. .cabeceras_actividad{
  1776. background: #f1f1f1;
  1777. padding: 10px;
  1778. }
  1779. .cabeceras_actividad p{
  1780. padding: 0;
  1781. margin: 0;
  1782. line-height: 1;
  1783. font-size: 14px;
  1784. color: #25344f;
  1785. }
  1786. .body_history {
  1787. padding: 10px;
  1788. border-bottom: 1px solid #f1f1f1;
  1789. }
  1790. .footer_history {
  1791. text-align: right;
  1792. }
  1793. .footer_history a{
  1794. font-size: 14px;
  1795. color: #fd4b4b;
  1796. transition: all 0.3s;
  1797. }
  1798. .footer_history a:hover{
  1799. color: #981111;
  1800. transition: all 0.3s;
  1801. }
  1802. .filtros_history .col-md-4 {
  1803. padding-left: 0!important;
  1804. }
  1805. .filtros_history .col-md-4 input {
  1806. width: 100%;
  1807. border: 1px solid #eceff1;
  1808. font-size: 14px;
  1809. padding: 1px 10px;
  1810. }
  1811. .filtros_history .col-md-4 label {
  1812. font-size: 14px;
  1813. color: #25344f;
  1814. }
  1815. .filtros_history .col-md-4 select{
  1816. font-size: 14px;
  1817. color: #798082;
  1818. border: 1px solid #eceff1;
  1819. padding: 1px 10px;
  1820. width: 100%;
  1821. }
  1822. .filtros_history {
  1823. margin-bottom: 30px;
  1824. }
  1825. input#custom-input-date {
  1826. color: #212529;
  1827. font-size: 14px;
  1828. font-weight: 500;
  1829. }
  1830. .label-error {
  1831. height: 13px;
  1832. margin-top: 4px;
  1833. font-size: 10px;
  1834. color: #DC3545;
  1835. }
  1836. input#custom-input-date:focus {
  1837. border: 1px solid #007BFF;
  1838. }
  1839. input#custom-input-date,
  1840. label {
  1841. display: block;
  1842. outline: none;
  1843. }
  1844. .buscar_filtros_history {
  1845. border: 1px solid #fd4b4b;
  1846. color: #fff;
  1847. background: #fd4b4b;
  1848. padding: 2px;
  1849. width: 100%;
  1850. font-size: 14px;
  1851. position: relative;
  1852. top: 27px;
  1853. cursor: pointer;
  1854. transition: all 0.3s;
  1855. }
  1856. .buscar_filtros_history:hover {
  1857. border: 1px solid #fd4b4b;
  1858. color: #fd4b4b;
  1859. background: #fff;
  1860. transition: all 0.3s;
  1861. }
  1862. .footerinfo a {
  1863. font-size: 14px;
  1864. color: #ababab;
  1865. margin-right: 10px;
  1866. float: left;
  1867. transition: all 0.3s;
  1868. }
  1869. .footerinfo a:hover {
  1870. color: #fd4b4b;
  1871. transition: all 0.3s;
  1872. }
  1873. .active .dropdown-toggle::after {
  1874. display: block;
  1875. position: absolute;
  1876. top: 50%;
  1877. right: 20px;
  1878. transform: translateY(-50%);
  1879. color: #ffffff;
  1880. }
  1881. .footerinfo {
  1882. padding: 0;
  1883. position: absolute;
  1884. width: 90%;
  1885. bottom: 0;
  1886. margin: 0;
  1887. }
  1888. .tabs_pruebas .test_tab.active {
  1889. background: #fd4b4b;
  1890. padding: 10px;
  1891. text-align: center;
  1892. cursor: pointer;
  1893. transition: all 0.3s;
  1894. }
  1895. .tabs_pruebas .test_tab.active p{
  1896. margin: 0;
  1897. letter-spacing: 9px;
  1898. color: #fff;
  1899. }
  1900. .tabs_pruebas .test_tab.active:hover {
  1901. background: #f81919;
  1902. transition: all 0.3s;
  1903. }
  1904. .tabs_pruebas .test_tab {
  1905. background: #d0d0d0;
  1906. padding: 10px;
  1907. text-align: center;
  1908. cursor: pointer;
  1909. transition: all 0.3s;
  1910. }
  1911. .tabs_pruebas .test_tab p{
  1912. margin: 0!important;
  1913. letter-spacing: 9px;
  1914. color: #fff!important;
  1915. }
  1916. .tabs_pruebas .test_tab:hover {
  1917. background: #f81919;
  1918. transition: all 0.3s;
  1919. }
  1920. .tabs_pruebas {
  1921. margin-bottom: 40px;
  1922. }
  1923. .comportamiento_body {
  1924. display: block;
  1925. margin-bottom: 80px;
  1926. }
  1927. .personalidad_body {
  1928. display: none;
  1929. margin-bottom: 80px;
  1930. }
  1931. .inteligencia_body {
  1932. display: none;
  1933. margin-bottom: 80px;
  1934. }
  1935. .modern-Checkbox [type="checkbox"] {
  1936. display: none;
  1937. }
  1938. .modern-Checkbox [type="checkbox"]:not(:checked) + label, .modern-Checkbox [type="checkbox"] :not(:checked) + label:hover {
  1939. background-color: white;
  1940. color: #363636;
  1941. border: 1px solid #d8d8d8;
  1942. width: 100%;
  1943. border-radius: 0;
  1944. font-size: 14px;
  1945. font-family: 'gudea';
  1946. padding: 35px;
  1947. letter-spacing: 6px;
  1948. }
  1949. .modern-Checkbox [type="checkbox"]:checked + label:before {
  1950. transform: rotate(45deg);
  1951. color: #fff;
  1952. }
  1953. .modern-Checkbox label {
  1954. color: #fff;
  1955. background-color: #fd4b4b78;
  1956. border-color: #fd4b4b;
  1957. cursor: pointer;
  1958. display: inline-block;
  1959. font-weight: 500;
  1960. text-align: center;
  1961. white-space: nowrap;
  1962. vertical-align: middle;
  1963. user-select: none;
  1964. border: 1px solid transparent;
  1965. padding: 35px;
  1966. font-size: 14px;
  1967. border-radius: 0;
  1968. transition: all 144ms ease-in-out;
  1969. width: 100%;
  1970. letter-spacing: 6px;
  1971. }
  1972. .modern-Checkbox label:hover {
  1973. transform: scale(0.985);
  1974. }
  1975. .modern-Checkbox label:before {
  1976. float: left;
  1977. margin-top: -0.75rem;
  1978. margin-bottom: -1rem;
  1979. margin-right: 0.4rem;
  1980. margin-left: -0.2rem;
  1981. font-weight: 100;
  1982. font-size: 2rem;
  1983. transition: transform 200ms ease-in-out;
  1984. content: "+";
  1985. position: relative;
  1986. top: -2px;
  1987. color: #fd4b4b;
  1988. }
  1989. .content-section .main p {
  1990. color: #878787;
  1991. padding: 0 15px;
  1992. margin-bottom: 40px;
  1993. }
  1994. .datos_candidato {
  1995. margin-bottom: 40px;
  1996. }
  1997. .datos_candidato label {
  1998. font-size: 14px;
  1999. color: #878787;
  2000. }
  2001. .datos_candidato select {
  2002. border: 1px solid #d0d0d0;
  2003. width: 100%;
  2004. padding: 10px;
  2005. color: #878787;
  2006. cursor: pointer;
  2007. }
  2008. .datos_candidato input {
  2009. border: 1px solid #d0d0d0;
  2010. width: 100%;
  2011. padding: 9px;
  2012. color: #878787;
  2013. }
  2014. .botones_interactivos_asignar {
  2015. text-align: right;
  2016. margin-bottom: 50px;
  2017. }
  2018. .botones_interactivos_asignar a{
  2019. font-size: 14px;
  2020. color: #fd4b4b;
  2021. transition: all 0.3s;
  2022. }
  2023. .botones_interactivos_asignar a:hover {
  2024. color: #981111;
  2025. transition: all 0.3s;
  2026. }
  2027. .botones_interactivos_asignar button {
  2028. border: 1px solid #fd4b4b;
  2029. color: #fff;
  2030. background: #fd4b4b;
  2031. padding: 10px 55px;
  2032. font-size: 14px;
  2033. position: relative;
  2034. cursor: pointer;
  2035. transition: all 0.3s;
  2036. }
  2037. .botones_interactivos_asignar button:hover {
  2038. border: 1px solid #fd4b4b;
  2039. color: #fd4b4b;
  2040. background: transparent;
  2041. transition: all 0.3s;
  2042. }
  2043. .body_prueba_list .modern-Checkbox label {
  2044. color: #363636;
  2045. background-color: #ffffff;
  2046. border-color: #fd4b4b;
  2047. cursor: pointer;
  2048. display: inline-block;
  2049. font-weight: 500;
  2050. text-align: center;
  2051. white-space: nowrap;
  2052. vertical-align: middle;
  2053. user-select: none;
  2054. border: 1px solid transparent;
  2055. padding: 35px;
  2056. font-size: 14px;
  2057. border-radius: 0;
  2058. transition: all 144ms ease-in-out;
  2059. width: 100%;
  2060. letter-spacing: 6px;
  2061. }
  2062. .body_prueba_list .modern-Checkbox label:before{
  2063. display: none;
  2064. }
  2065. .content-section .main_pruebas_list h1 {
  2066. font-size: 27px;
  2067. padding: 0px 15px 75px;
  2068. color: #949494;
  2069. }