You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_ads.scss 22KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276
  1. h1,
  2. h3 {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .jobs {
  7. margin-top: 36px;
  8. padding-left: 72px;
  9. @include media-below($bp-xl) {
  10. padding-left: 36px !important;
  11. }
  12. }
  13. .active-jobs-header {
  14. padding-left: 81px;
  15. display: flex;
  16. justify-content: space-between;
  17. align-items: center;
  18. padding-right: 5rem;
  19. @include media-below($bp-xl) {
  20. padding: 0 0.75rem !important;
  21. }
  22. }
  23. .active-jobs-header-buttons {
  24. display: flex;
  25. }
  26. .active-jobs-header-buttons > button {
  27. margin-left: 18px;
  28. }
  29. .filter-vector {
  30. margin-left: 0.5rem !important;
  31. }
  32. .active-jobs-jobs {
  33. display: flex;
  34. margin-top: 39px;
  35. position: relative;
  36. width: 100%;
  37. }
  38. .active-jobs-jobs-a {
  39. position: absolute;
  40. top: 50%;
  41. transform: translate(0, -50%);
  42. }
  43. .active-jobs-jobs-arrows {
  44. display: flex;
  45. flex-direction: column;
  46. align-items: center;
  47. justify-content: center;
  48. @include media-below($bp-xl) {
  49. flex-direction: row;
  50. gap: 10px;
  51. justify-content: flex-start;
  52. padding-left: 0.75rem !important;
  53. }
  54. }
  55. .active-jobs-jobs-arrows button {
  56. margin: 9px 0;
  57. box-sizing: border-box;
  58. width: 45px;
  59. height: 45px;
  60. background: #ffffff;
  61. border: 1px solid #e4e4e4;
  62. border-radius: 9px;
  63. cursor: pointer;
  64. }
  65. .active-jobs-jobs-no-jobs {
  66. position: relative;
  67. width: 100% !important;
  68. height: 75vh;
  69. display: flex;
  70. flex-direction: column;
  71. align-items: center;
  72. justify-content: center;
  73. text-align: center;
  74. width: 466px;
  75. margin: 0 auto;
  76. @include media-below($bp-xl) {
  77. width: 300px;
  78. }
  79. }
  80. .active-jobs-jobs-no-jobs h1 {
  81. margin-bottom: 18px !important;
  82. }
  83. .active-jobs-jobs-no-jobs p {
  84. margin-bottom: 36px !important;
  85. }
  86. .active-jobs-jobs-no-jobs-filters {
  87. position: absolute;
  88. right: 72px;
  89. top: 0;
  90. }
  91. .active-jobs-jobs-job {
  92. padding-left: 81px;
  93. display: flex;
  94. flex-direction: row;
  95. width: 100%;
  96. @include media-below($bp-xl) {
  97. padding-left: 0;
  98. }
  99. }
  100. .active-jobs-jobs-job .slick-slider,
  101. .archived-jobs-jobs-job .slick-slider {
  102. width: 100% !important;
  103. }
  104. .active-jobs-jobs-job .slick-slider .slick-list .slick-track {
  105. transform: translate3d(0 0 0) !important;
  106. }
  107. .active-jobs-jobs-job .slick-track,
  108. .archived-jobs-jobs-job .slick-track {
  109. margin: 0 !important;
  110. }
  111. .archived-jobs,
  112. .job-details-applicants {
  113. margin-top: 56px;
  114. }
  115. .archived-jobs-header,
  116. .job-details-applicants-header {
  117. padding-left: 81px;
  118. @include media-below($bp-xl) {
  119. padding: 0 0.75rem;
  120. }
  121. }
  122. .archived-jobs-jobs,
  123. .job-details-applicants-applicants {
  124. display: flex;
  125. margin-top: 27px;
  126. position: relative;
  127. }
  128. .archived-jobs-jobs-a,
  129. .job-details-applicants-applicants-a {
  130. position: absolute;
  131. top: 50%;
  132. transform: translate(0, -50%);
  133. }
  134. .archived-jobs-jobs-arrows,
  135. .job-details-applicants-applicants-arrows {
  136. display: flex;
  137. flex-direction: column;
  138. align-items: center;
  139. justify-content: center;
  140. }
  141. .job-details-applicants-applicants-arrows button {
  142. margin: 9px 0;
  143. box-sizing: border-box;
  144. width: 45px;
  145. height: 45px;
  146. background: #ffffff;
  147. border: 1px solid #e4e4e4;
  148. border-radius: 9px;
  149. cursor: pointer;
  150. }
  151. .archived-jobs-jobs-job,
  152. .job-details-applicants-applicants-applicant {
  153. padding-left: 81px;
  154. // ovde je greska
  155. // display: flex;
  156. flex-direction: row;
  157. width: 100%;
  158. @include media-below($bp-xl) {
  159. padding: 0;
  160. }
  161. }
  162. .archive-jobs-no-active-jobs {
  163. padding-bottom: 136px !important;
  164. }
  165. .archive-job {
  166. box-sizing: border-box;
  167. display: flex;
  168. flex-direction: column;
  169. justify-content: center;
  170. align-items: center;
  171. padding: 36px;
  172. gap: 18px;
  173. left: 0px;
  174. top: 0px;
  175. background: #ffffff;
  176. border: 1px solid #e4e4e4;
  177. border-radius: 12px;
  178. margin-right: 27px;
  179. transition: 0.3s;
  180. cursor: pointer;
  181. }
  182. .job-details-candidate {
  183. box-sizing: border-box;
  184. display: flex;
  185. flex-direction: column;
  186. justify-content: center;
  187. align-items: center;
  188. padding: 36px;
  189. left: 0px;
  190. top: 0px;
  191. background: #ffffff;
  192. border: 1px solid #e4e4e4;
  193. border-radius: 12px;
  194. margin-right: 27px;
  195. transition: 0.3s;
  196. cursor: pointer;
  197. padding: 54px 72px !important;
  198. }
  199. .archive-job:hover,
  200. .job-details-candidate:hover {
  201. scale: 1.05;
  202. border-color: $mainBlue !important;
  203. background-color: $mainBlueLight !important;
  204. }
  205. .archive-job-date p {
  206. font-family: "Source Sans Pro";
  207. font-style: normal;
  208. font-weight: 400;
  209. font-size: 12px;
  210. line-height: 15px;
  211. color: #272727;
  212. flex: none;
  213. order: 0;
  214. flex-grow: 0;
  215. }
  216. .job-details-candidate-date p {
  217. font-family: "Source Sans Pro";
  218. font-style: normal;
  219. font-weight: 400;
  220. font-size: 12px;
  221. line-height: 15px;
  222. color: #272727;
  223. margin-bottom: 18px !important;
  224. flex: none;
  225. order: 0;
  226. flex-grow: 0;
  227. }
  228. .archive-job-title h3,
  229. .job-details-candidate-title h3 {
  230. font-family: "Source Sans Pro";
  231. font-style: normal;
  232. font-weight: 600;
  233. font-size: 16px;
  234. line-height: 20px;
  235. color: #226cb0;
  236. flex: none;
  237. order: 1;
  238. flex-grow: 0;
  239. }
  240. .archive-job-image img {
  241. width: 49px;
  242. height: 39px;
  243. flex: none;
  244. order: 2;
  245. flex-grow: 0;
  246. }
  247. .job-details-candidate-experience {
  248. margin-bottom: 9px;
  249. }
  250. .archive-job-experience p,
  251. .job-details-candidate-experience p {
  252. font-family: "Source Sans Pro";
  253. font-style: normal;
  254. font-weight: 400;
  255. font-size: 12px;
  256. line-height: 15px;
  257. color: #272727;
  258. flex: none;
  259. order: 3;
  260. flex-grow: 0;
  261. }
  262. .slick-list {
  263. padding: 1.25rem !important;
  264. overflow-y: visible !important;
  265. @include media-below($bp-xl) {
  266. }
  267. }
  268. .slick-dots {
  269. display: none !important;
  270. }
  271. .slick-arrow {
  272. display: none !important;
  273. }
  274. .job-card {
  275. display: flex;
  276. flex-direction: column;
  277. justify-content: center;
  278. align-items: center;
  279. padding: 72px;
  280. width: 90% !important;
  281. background: #ffffff;
  282. border: 1px solid #e4e4e4;
  283. border-radius: 18px;
  284. gap: 18px;
  285. margin-right: 36px;
  286. cursor: pointer;
  287. transition: 0.3s;
  288. @include media-below($bp-xl) {
  289. margin-right: 20px !important;
  290. padding: 36px !important;
  291. }
  292. }
  293. .job-card:hover {
  294. scale: 1.05;
  295. border-color: $mainBlue !important;
  296. background-color: $mainBlueLight !important;
  297. }
  298. .job-card-buttons-button {
  299. display: flex;
  300. flex-direction: row;
  301. justify-content: center;
  302. align-items: center;
  303. padding: 9px !important;
  304. gap: 10px !important;
  305. width: 36px !important;
  306. height: 36px !important;
  307. border: 1px solid #e4e4e4 !important;
  308. background-color: white;
  309. border-radius: 9px !important;
  310. flex: none;
  311. order: 0;
  312. flex-grow: 0;
  313. }
  314. .job-card-date p {
  315. font-family: "Source Sans Pro";
  316. font-style: normal;
  317. font-weight: 400;
  318. font-size: 12px;
  319. line-height: 15px;
  320. color: #272727;
  321. flex: none;
  322. order: 0;
  323. flex-grow: 0;
  324. }
  325. .job-card-title h3 {
  326. font-family: "Source Sans Pro";
  327. font-style: normal;
  328. font-weight: 600;
  329. font-size: 24px;
  330. line-height: 32px;
  331. letter-spacing: 0.02em;
  332. color: #226cb0;
  333. flex: none;
  334. order: 1;
  335. flex-grow: 0;
  336. }
  337. .job-card-logo img {
  338. width: 61px;
  339. height: 49px;
  340. flex: none;
  341. order: 2;
  342. flex-grow: 0;
  343. }
  344. .job-card-experience p {
  345. font-family: "Source Sans Pro";
  346. font-style: normal;
  347. font-weight: 400;
  348. font-size: 16px;
  349. line-height: 20px;
  350. color: #272727;
  351. flex: none;
  352. order: 3;
  353. flex-grow: 0;
  354. }
  355. .job-card-buttons {
  356. overflow: hidden;
  357. display: flex;
  358. flex-direction: row;
  359. align-items: flex-start;
  360. justify-content: center;
  361. padding: 0px;
  362. gap: 18px;
  363. flex: none;
  364. order: 4;
  365. flex-grow: 0;
  366. @include media-below($bp-xl) {
  367. gap: 9px !important;
  368. }
  369. }
  370. .job-details-candidate-buttons {
  371. display: flex;
  372. align-items: center;
  373. justify-content: space-between !important;
  374. margin-bottom: 9px;
  375. width: 205px !important;
  376. flex-wrap: wrap;
  377. }
  378. .job-details-candidate-cv a {
  379. color: $mainBlue;
  380. }
  381. .job-details-candidate-buttons button {
  382. box-sizing: border-box;
  383. margin: 0 4.5px;
  384. padding: 9px;
  385. gap: 10px;
  386. border: 1px solid #e4e4e4;
  387. border-radius: 9px;
  388. flex: none;
  389. order: 0;
  390. flex-grow: 0;
  391. background-color: white;
  392. margin-bottom: 9px;
  393. }
  394. .job-card-buttons button {
  395. box-sizing: border-box;
  396. display: flex;
  397. flex-direction: row;
  398. justify-content: center;
  399. align-items: center;
  400. padding: 9px;
  401. gap: 10px;
  402. width: 76px;
  403. height: 38px;
  404. border: 1px solid #e4e4e4;
  405. border-radius: 9px;
  406. flex: none;
  407. order: 0;
  408. flex-grow: 0;
  409. }
  410. .add-job {
  411. margin-top: 49px;
  412. display: flex;
  413. justify-content: flex-end;
  414. align-items: center;
  415. padding-right: 5rem !important;
  416. padding-bottom: 49px;
  417. @include media-below($bp-xl) {
  418. padding-right: 18px !important;
  419. }
  420. }
  421. .add-job-btn,
  422. .delete-filters-btn {
  423. display: flex;
  424. flex-direction: row;
  425. justify-content: center;
  426. align-items: center;
  427. padding: 18px 72px;
  428. gap: 10px;
  429. width: 201px;
  430. height: 51px;
  431. background: #226cb0;
  432. border-radius: 9px;
  433. margin-top: 9px;
  434. @include media-below($bp-xl) {
  435. width: 147px;
  436. }
  437. }
  438. .add-job-no-jobs {
  439. margin: 0 !important;
  440. padding: 0 !important;
  441. }
  442. .job-filters-header-container {
  443. display: flex;
  444. justify-content: space-between;
  445. }
  446. .job-filters-header {
  447. display: flex;
  448. align-items: center;
  449. }
  450. .job-filters-header-close {
  451. cursor: pointer;
  452. }
  453. .job-filters-header > * {
  454. margin-right: 0.25rem;
  455. }
  456. .job-filters-header img {
  457. width: 18px;
  458. height: 15.75px;
  459. }
  460. .job-filters-header sub {
  461. color: #226cb0;
  462. }
  463. .job-filters-sub-title {
  464. font-family: "Source Sans Pro";
  465. font-style: normal;
  466. font-weight: 600;
  467. font-size: 16px;
  468. line-height: 20px;
  469. color: #272727;
  470. }
  471. .job-filters-experience {
  472. margin-top: 18px;
  473. box-sizing: border-box;
  474. }
  475. .job-filters-experience-slider {
  476. margin-top: 5px;
  477. }
  478. .job-filters-technologies {
  479. margin-top: 18px;
  480. }
  481. .job-filters-employment-type {
  482. display: flex;
  483. }
  484. .job-filters-employment-type > button {
  485. margin-right: 0.5rem;
  486. margin-top: 18px;
  487. }
  488. .job-filters-search {
  489. margin-top: 18px;
  490. padding-bottom: 18px;
  491. }
  492. .job-filters-search > * {
  493. width: 100%;
  494. }
  495. .job-details {
  496. padding: 45px 72px 18px 223px;
  497. @include media-below($bp-xl) {
  498. padding: 18px 36px !important;
  499. }
  500. }
  501. .job-details-tech-logo {
  502. position: relative;
  503. left: -80px;
  504. display: flex;
  505. align-items: center;
  506. justify-content: space-between;
  507. @include media-below($bp-xl) {
  508. left: 0;
  509. }
  510. }
  511. .job-details-applicants {
  512. position: relative;
  513. left: -80px !important;
  514. @include media-below($bp-xl) {
  515. left: 0 !important;
  516. }
  517. }
  518. .job-details-tech-logo-title {
  519. display: flex;
  520. align-items: center;
  521. }
  522. .job-details-tech-logo-title-img {
  523. margin-right: 18px;
  524. }
  525. .job-details-tech-logo-title-sub sub {
  526. margin-left: 9px;
  527. font-size: 1.25rem;
  528. color: $mainBlue !important;
  529. font-weight: 600;
  530. }
  531. .job-details-tech-logo-date {
  532. @include media-below($bp-xl) {
  533. margin-bottom: 18px;
  534. }
  535. }
  536. .job-details-tech-logo-date p span {
  537. color: #9d9d9d;
  538. }
  539. .job-details-content-experience {
  540. margin-top: 18px;
  541. }
  542. .job-details-content-experience p {
  543. color: #272727;
  544. font-family: "Source Sans Pro";
  545. font-style: normal;
  546. font-weight: 400;
  547. font-size: 16px;
  548. line-height: 20px;
  549. }
  550. .job-details-content-work-time {
  551. margin-top: 18px;
  552. }
  553. .job-details-content-work-time button {
  554. box-sizing: border-box;
  555. flex-direction: row;
  556. padding: 9px;
  557. gap: 10px;
  558. width: 76px;
  559. height: 38px;
  560. border: 1px solid #e4e4e4;
  561. border-radius: 9px;
  562. flex: none;
  563. order: 0;
  564. flex-grow: 0;
  565. margin-right: 18px;
  566. cursor: pointer;
  567. }
  568. .job-details-content-content {
  569. margin-top: 18px;
  570. }
  571. .job-details-content-conten-description {
  572. margin-top: 18px;
  573. }
  574. .job-details-content-conten-description h3 {
  575. margin-bottom: 9px;
  576. }
  577. .job-details-content-conten-description ul {
  578. list-style: circle;
  579. padding-left: 36px;
  580. }
  581. .job-details-actions {
  582. display: flex;
  583. justify-content: space-between;
  584. align-items: center;
  585. margin-top: 36px;
  586. }
  587. .job-details-expired-at {
  588. position: relative;
  589. left: -80px;
  590. }
  591. .job-details-buttons {
  592. display: flex;
  593. justify-content: flex-end;
  594. align-items: center;
  595. @include media-below($bp-xl) {
  596. justify-content: center;
  597. }
  598. }
  599. .job-details-buttons > button {
  600. margin-left: 36px;
  601. }
  602. .job-details-buttons-link {
  603. color: $mainBlue;
  604. cursor: pointer;
  605. border: none;
  606. background-color: transparent;
  607. text-decoration: underline;
  608. }
  609. .job-details-candidate-technologies {
  610. display: flex;
  611. justify-content: space-between;
  612. max-width: 208px;
  613. flex-wrap: wrap;
  614. }
  615. .hiddenAd {
  616. visibility: hidden !important;
  617. }
  618. .add-job-modal {
  619. padding: 36px !important;
  620. border: none !important;
  621. border-radius: 18px;
  622. min-height: 591px !important;
  623. width: 512px !important;
  624. }
  625. .add-job-modal-header {
  626. display: flex;
  627. align-items: center;
  628. justify-content: space-between;
  629. margin-bottom: 18px !important;
  630. }
  631. .add-job-modal-header img {
  632. width: 18px;
  633. height: 18px;
  634. }
  635. .add-job-modal-header-title {
  636. display: flex;
  637. align-items: flex-end;
  638. }
  639. .add-job-modal-header-title > * {
  640. margin-right: 6px;
  641. }
  642. .add-job-modal-header-title-span {
  643. color: $mainBlue;
  644. }
  645. .add-job-modal-header-icon button {
  646. background-color: transparent;
  647. border: none;
  648. cursor: pointer;
  649. }
  650. .add-job-modal-header-icon img {
  651. width: 9px !important;
  652. height: 12px !important;
  653. }
  654. .add-job-modal-stages {
  655. display: flex;
  656. flex-direction: column;
  657. justify-content: space-between;
  658. min-height: calc(591px - 36px - 36px - 20.8px - 18px) !important;
  659. }
  660. .add-job-modal-stage {
  661. display: flex;
  662. flex-direction: column;
  663. justify-content: space-between;
  664. min-height: calc(591px - 36px - 36px - 20.8px - 18px) !important;
  665. }
  666. .add-job-modal-stage-sub-card {
  667. border: none;
  668. box-sizing: border-box;
  669. outline: 0;
  670. position: relative;
  671. width: 100%;
  672. display: flex;
  673. flex-direction: column;
  674. margin-bottom: 9px;
  675. }
  676. .add-job-modal-stage-sub-card input[type="date"]::-webkit-calendar-picker-indicator {
  677. background: transparent;
  678. bottom: 0;
  679. color: transparent;
  680. cursor: pointer;
  681. height: auto;
  682. left: 0;
  683. position: absolute;
  684. right: 0;
  685. top: 0;
  686. width: auto;
  687. }
  688. .add-job-modal-stage-sub-card-third {
  689. display: flex;
  690. flex-direction: column;
  691. margin-bottom: 9px;
  692. }
  693. .add-job-modal-stage-sub-card-third .tox-tinymce {
  694. height: 150px !important;
  695. }
  696. .job-details-content-conten-description p {
  697. display: block;
  698. }
  699. .add-job-modal-stage-sub-card label,
  700. .add-job-modal-stage-sub-card-third label {
  701. margin-bottom: 4.5px !important;
  702. }
  703. .add-job-modal-stage-sub-card-title {
  704. margin-bottom: 9px;
  705. font-weight: bold;
  706. }
  707. .add-job-modal-stage-sub-card input,
  708. .add-job-modal-stage-sub-card-third textarea {
  709. padding: 9px;
  710. border-radius: 7px;
  711. border: 1px solid #e4e4e4;
  712. outline: none;
  713. }
  714. .add-job-modal-stage-sub-card-third textarea {
  715. resize: none;
  716. }
  717. .add-job-modal-stage-sub-card-checkboxes {
  718. padding: 0 9px !important;
  719. }
  720. .add-job-modal-stage-sub-card-checkboxes {
  721. display: flex;
  722. flex-wrap: wrap;
  723. justify-content: flex-start;
  724. }
  725. .add-job-modal-stage-sub-card-checkboxes .MuiFormControlLabel-root {
  726. width: calc(100% / 3) !important;
  727. margin: 0 !important;
  728. }
  729. .add-job-modal-stage-sub-card-buttons {
  730. display: flex;
  731. }
  732. .add-job-modal-stage-sub-card-buttons button {
  733. margin-right: 9px;
  734. }
  735. .add-job-modal-actions {
  736. display: flex;
  737. justify-content: space-between;
  738. }
  739. .add-job-modal-actions button {
  740. padding: 18px 72px !important;
  741. }
  742. .stats-job {
  743. width: 247px !important;
  744. }
  745. .stat-jobs {
  746. display: block !important;
  747. margin-top: -60px;
  748. padding-top: 0px;
  749. width: 100%;
  750. position: relative;
  751. left: -20px;
  752. @include media-below($bp-xl) {
  753. left: -7.5px;
  754. }
  755. }
  756. .apply-for-job {
  757. min-width: 512px !important;
  758. }
  759. .apply-for-job-header {
  760. display: flex;
  761. justify-content: space-between;
  762. align-items: center;
  763. margin-bottom: 18px;
  764. }
  765. .apply-for-job-header-left {
  766. display: flex;
  767. align-items: center;
  768. }
  769. .apply-for-job-header-left > * {
  770. margin-right: 6px !important;
  771. }
  772. .apply-for-job-header-left-image img {
  773. width: 18px;
  774. height: 18px;
  775. }
  776. .apply-for-job-header-left-image-title p {
  777. font-family: "Source Sans Pro";
  778. font-style: normal;
  779. font-weight: 600;
  780. font-size: 24px;
  781. line-height: 32px;
  782. letter-spacing: 0.02em;
  783. color: #272727;
  784. }
  785. .apply-for-job-header-left-image-title-sub sub {
  786. font-family: "Source Sans Pro";
  787. font-style: normal;
  788. font-weight: 600;
  789. line-height: 32px;
  790. font-size: 18px;
  791. letter-spacing: 0.02em;
  792. color: $mainBlue;
  793. }
  794. .apply-for-job-header-right button {
  795. border: none;
  796. outline: none;
  797. padding: 0 !important;
  798. margin: 0 !important;
  799. background-color: transparent;
  800. cursor: pointer;
  801. }
  802. .apply-for-job-header-right button img {
  803. width: 9px !important;
  804. height: 10.5px !important;
  805. }
  806. .uploadCV-input {
  807. width: 100%;
  808. height: 140px;
  809. border: 1px solid #e4e4e4;
  810. border-radius: 6px;
  811. margin-top: 6px;
  812. display: flex;
  813. justify-content: center;
  814. align-items: center;
  815. }
  816. .uploadCV-content-sub-container {
  817. display: flex;
  818. flex-direction: column;
  819. }
  820. .uploadCV-content-sub-container > p {
  821. font-family: Source Sans Pro;
  822. font-size: 14px;
  823. font-weight: 400;
  824. line-height: 18px;
  825. letter-spacing: 0em;
  826. text-align: left;
  827. }
  828. .uploadCV-input-sub-container {
  829. display: flex;
  830. flex-direction: column;
  831. align-items: center;
  832. justify-content: center;
  833. }
  834. .uploadCV-input-sub-container img {
  835. width: 22px;
  836. height: 22px;
  837. }
  838. .uploadCV-input-sub-container p {
  839. width: 332px;
  840. height: 40px;
  841. font-family: Source Sans Pro;
  842. font-size: 16px;
  843. font-weight: 400;
  844. line-height: 20.11px;
  845. letter-spacing: 0em;
  846. text-align: center;
  847. }
  848. .apply-for-job-modal-form-control {
  849. display: flex;
  850. flex-direction: column;
  851. margin-bottom: 9px;
  852. }
  853. .apply-for-job-modal-form-control {
  854. border: none;
  855. box-sizing: border-box;
  856. outline: 0;
  857. position: relative;
  858. width: 100%;
  859. }
  860. .apply-for-job-modal-form-control input[type="date"]::-webkit-calendar-picker-indicator {
  861. background: transparent;
  862. bottom: 0;
  863. color: transparent;
  864. cursor: pointer;
  865. height: auto;
  866. left: 0;
  867. position: absolute;
  868. right: 0;
  869. top: 0;
  870. width: auto;
  871. }
  872. .apply-for-job-modal-form-control label {
  873. font-family: "Source Sans Pro";
  874. font-style: normal;
  875. font-weight: 400;
  876. font-size: 16px;
  877. line-height: 20px;
  878. color: #272727;
  879. margin-bottom: 4.5px;
  880. }
  881. .apply-for-job-modal-form-control input,
  882. .apply-for-job-modal-form-control select,
  883. .apply-for-job-modal-form-control textarea {
  884. box-sizing: border-box;
  885. display: flex;
  886. flex-direction: row;
  887. align-items: center;
  888. padding: 18px;
  889. gap: 10px;
  890. border: 1px solid #e4e4e4;
  891. border-radius: 7px;
  892. outline: none;
  893. font-size: 16px;
  894. }
  895. .apply-for-job-modal-form-control textarea {
  896. resize: none;
  897. font-size: 16px;
  898. }
  899. .apply-for-job-modal-form-control input[type="submit"] {
  900. box-sizing: border-box;
  901. display: flex;
  902. flex-direction: row;
  903. justify-content: center;
  904. align-items: center;
  905. padding: 18px 72px;
  906. gap: 10px;
  907. background: #226cb0;
  908. color: white;
  909. border-radius: 9px;
  910. cursor: pointer;
  911. font-size: 16px;
  912. }
  913. .apply-for-job-buttons {
  914. display: flex;
  915. justify-content: space-between;
  916. margin-top: 27px !important;
  917. }
  918. .apply-for-job-buttons > button {
  919. padding: 18px 72px !important;
  920. border-radius: 9px;
  921. cursor: pointer;
  922. }
  923. .apply-for-job-buttons > button:first-child {
  924. background-color: white;
  925. border: 1px solid $mainBlue;
  926. color: $mainBlue;
  927. }
  928. .apply-for-job-buttons > button:last-child {
  929. background-color: $mainBlue;
  930. border: 1px solid $mainBlue;
  931. color: white;
  932. }
  933. .apply-for-job-header-title p {
  934. font-family: "Source Sans Pro";
  935. font-style: normal;
  936. font-weight: 600;
  937. font-size: 16px;
  938. line-height: 20px;
  939. color: #272727;
  940. margin-bottom: 9px !important;
  941. }
  942. .apply-for-job-header-sub-group-checkboxes {
  943. padding: 0 9px !important;
  944. }
  945. .apply-for-job-header-sub-group-checkboxes {
  946. display: flex;
  947. flex-wrap: wrap;
  948. justify-content: flex-start;
  949. }
  950. .apply-for-job-header-sub-group-checkboxes .MuiFormControlLabel-root {
  951. width: calc(100% / 3) !important;
  952. margin: 0 !important;
  953. }
  954. .apply-for-job-modal-form-control-drag-and-drop {
  955. border: 1px solid #e4e4e4;
  956. padding: 36px;
  957. border-radius: 6px;
  958. display: flex;
  959. justify-content: center;
  960. align-items: center;
  961. flex-direction: column;
  962. }
  963. .apply-for-job-modal-form-control-drag-and-drop p {
  964. text-align: center;
  965. font-size: 16px;
  966. }
  967. .apply-for-job-modal-form-control-drag-and-drop p button {
  968. background-color: white;
  969. border: none;
  970. padding: 0 !important;
  971. margin: 0 !important;
  972. color: $mainBlue;
  973. text-decoration: underline;
  974. font-size: 16px;
  975. }
  976. .create-job-page {
  977. display: flex;
  978. align-items: center;
  979. justify-content: center;
  980. height: 100% !important;
  981. position: relative;
  982. }
  983. .create-job-page-content {
  984. max-width: 630px !important;
  985. min-width: 630px !important;
  986. @include media-below($bp-xl) {
  987. padding: 20px;
  988. min-width: 0 !important;
  989. }
  990. }
  991. .create-job-page-content-header {
  992. display: flex;
  993. align-items: center;
  994. gap: 9px;
  995. margin-bottom: 36px;
  996. }
  997. .create-job-page-content-header sub {
  998. color: $mainBlue;
  999. }
  1000. .create-job-form-control {
  1001. display: flex;
  1002. flex-direction: column;
  1003. margin-bottom: 18px;
  1004. }
  1005. .create-job-form-control label {
  1006. font-family: "Source Sans Pro";
  1007. font-style: normal;
  1008. font-weight: 400;
  1009. font-size: 16px;
  1010. line-height: 20px;
  1011. color: #272727;
  1012. margin-bottom: 4.5px;
  1013. }
  1014. .create-job-form-control input {
  1015. box-sizing: border-box;
  1016. display: flex;
  1017. flex-direction: row;
  1018. align-items: center;
  1019. padding: 18px;
  1020. gap: 10px;
  1021. background: #ffffff;
  1022. border: 1px solid #e4e4e4;
  1023. border-radius: 7px;
  1024. }
  1025. .create-job-form-control-buttons {
  1026. display: flex;
  1027. }
  1028. .create-job-form-control-buttons > button {
  1029. margin-right: 9px;
  1030. }
  1031. .create-job-buttons {
  1032. display: flex;
  1033. justify-content: flex-end;
  1034. flex-wrap: wrap;
  1035. }
  1036. .create-job-buttons-back {
  1037. margin-left: 18px;
  1038. box-sizing: border-box;
  1039. display: flex;
  1040. flex-direction: row;
  1041. justify-content: center;
  1042. align-items: center;
  1043. padding: 18px 72px;
  1044. gap: 10px;
  1045. background: #f4f4f4;
  1046. border: 1px solid #e4e4e4;
  1047. border-radius: 9px;
  1048. margin-left: 9px;
  1049. cursor: pointer;
  1050. @include media-below($bp-xl) {
  1051. margin-bottom: 9px !important;
  1052. }
  1053. }
  1054. .create-job-buttons-forward {
  1055. box-sizing: border-box;
  1056. display: flex;
  1057. flex-direction: row;
  1058. justify-content: center;
  1059. align-items: center;
  1060. padding: 18px 72px;
  1061. gap: 10px;
  1062. background: #226cb0;
  1063. border-radius: 9px;
  1064. border: none;
  1065. color: white;
  1066. margin-left: 9px;
  1067. cursor: pointer;
  1068. @include media-below($bp-xl) {
  1069. margin-bottom: 9px !important;
  1070. }
  1071. }
  1072. .create-job-go-back {
  1073. position: absolute;
  1074. right: 72px;
  1075. bottom: 36px;
  1076. }
  1077. .create-job-go-back button {
  1078. border: none;
  1079. background-color: transparent;
  1080. padding: 0;
  1081. outline: none;
  1082. margin: 0;
  1083. font-family: "Source Sans Pro";
  1084. font-style: normal;
  1085. font-weight: 400;
  1086. font-size: 16px;
  1087. line-height: 20px;
  1088. text-align: right;
  1089. text-decoration-line: underline;
  1090. color: #226cb0;
  1091. cursor: pointer;
  1092. }
  1093. .create-job-form-control-first-step-input {
  1094. border: none;
  1095. box-sizing: border-box;
  1096. outline: 0;
  1097. position: relative;
  1098. width: 100%;
  1099. }
  1100. .create-job-form-control input[type="date"]::-webkit-calendar-picker-indicator {
  1101. background: transparent;
  1102. bottom: 0;
  1103. color: transparent;
  1104. cursor: pointer;
  1105. height: auto;
  1106. left: 0;
  1107. position: absolute;
  1108. right: 0;
  1109. top: 0;
  1110. width: auto;
  1111. }