{"version":3,"sources":["srcs\\2-style\\2-basics\\_typography.scss","srcs\\2-style\\1-helpers\\_variables.scss","srcs\\2-style\\1-helpers\\_base.scss","srcs\\2-style\\1-helpers\\_mixins.scss","srcs\\2-style\\1-helpers\\_placeholders.scss","srcs\\2-style\\2-basics\\_buttons.scss","srcs\\2-style\\3-layout\\_header.scss","srcs\\2-style\\3-layout\\_filter.scss","srcs\\2-style\\3-layout\\_jobs.scss","srcs\\2-style\\3-layout\\_job-detail.scss","srcs\\2-style\\3-layout\\_loading-animation.scss","srcs\\2-style\\3-layout\\_error-display.scss"],"names":[],"mappings":"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","file":"style.5f5ee8df.css","sourceRoot":"..","sourcesContent":["@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@300;400;700&display=swap');\r\n\r\n* {\r\n    font-family: 'Kumbh Sans';\r\n    font-weight: 700;\r\n    color: white;\r\n}\r\n\r\np {\r\n    font-size: 16px;\r\n    line-height: 26px;\r\n}\r\n\r\nh1 {\r\n    font-size: 28px;\r\n    line-height: 28px;\r\n}\r\n\r\nh2 {\r\n    font-size: 24px;\r\n    line-height: 24px;\r\n}\r\n\r\nh3 {\r\n    font-size: 20px;\r\n    line-height: 20px;\r\n}\r\n\r\nh4 {\r\n    font-size: 14px;\r\n    line-height: 14px;\r\n}\r\n\r\ninput::placeholder, input {\r\n    font-size: 16px;\r\n    font-weight: 400;\r\n    line-height: 16px;\r\n}\r\n\r\ninput::placeholder {\r\n    opacity: 0.5;\r\n}\r\n\r\n.button {\r\n    font-size: 16px;\r\n    line-height: 16px;\r\n}\r\n\r\n.company-button {\r\n    color: var(--button-company-color);\r\n}\r\n\r\n.job-card-title {\r\n    font-size: 20px;\r\n    line-height: 20px;\r\n}\r\n\r\n.job-card-location {\r\n    font-size: 14px;\r\n    line-height: 18px;\r\n}\r\n\r\n.job-card-desc {\r\n    font-size: 16px;\r\n    font-weight: 400;\r\n    line-height: 16px;\r\n}\r\n\r\n.job-detail-header-title {\r\n    font-size: 20px;\r\n    line-height: 20px;\r\n}\r\n\r\n.job-detail-desc > p, .job-detail-desc > p > a, .job-detail-desc > ul > li, .job-card-desc > p > code {\r\n    font-weight: 400;\r\n    color: var(--dark-grey);\r\n    line-height: 18px;\r\n}\r\n\r\n.job-detail-apply > p, .job-detail-apply > p > a, .job-detail-apply > ul > li {\r\n    color: white;\r\n    font-weight: 400;\r\n}\r\n\r\n.job-detail-desc > .job-detail-desc-title, .job-detail-apply > p:first-child {\r\n    font-size: 28px;\r\n    line-height: 28px;\r\n    font-weight: 700;\r\n    margin-bottom: 20px;\r\n}\r\n\r\n.job-detail-desc > .job-card-location {\r\n    color: var(--violet);\r\n    font-weight: 700;\r\n}\r\n\r\n.job-detail-desc > a.button, .job-detail-footer-wrap > a.button {\r\n    text-decoration: none;\r\n    color: white;\r\n    font-weight: 700;\r\n}\r\n\r\n.px20 {\r\n    font-size: 20px;\r\n    line-height: 20px;\r\n    color: var(--bg-panel);\r\n}\r\n\r\np.error {\r\n    font-size: 13px;\r\n    font-weight: 400;\r\n    color: red;\r\n}\r\n\r\n\r\n.violet {\r\n    color: var(--violet);\r\n}\r\n\r\n.gray {\r\n    color: var(--gray);\r\n}\r\n\r\n.dark-grey {\r\n    color: var(--dark-grey);\r\n}\r\n\r\n.header-color {\r\n    color: var(--header-color);\r\n}\r\n\r\n.weight700 {\r\n    font-weight: 700;\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    .job-detail-desc > .job-detail-desc-title, .job-detail-apply > p:first-child {\r\n        font-size: 20px;\r\n        line-height: 20px;\r\n    }\r\n}","html {\r\n    --violet: rgba(89, 100, 224, 1);\r\n    --light-violet: rgba(147, 155, 244, 1);\r\n    --dark-grey: rgba(110, 128, 152, 1);\r\n    --gray: rgba(157, 174, 194, 1);\r\n}\r\n\r\nhtml[data-theme='light'] {\r\n    --bg: rgba(244, 246, 248, 1);\r\n    --bg-panel:rgba(255, 255, 255, 1);\r\n    --header-color: rgba(25, 32, 45, 1);\r\n    --filter-icon-color: rgba(110, 128, 152, 1);\r\n    --card-box-shadow: 0px 0px 10px -1px rgba(0,0,0,0.5);\r\n    --card-box-shadow-hover: 0px 0px 10px 1px rgba(0,0,0,0.5);\r\n    --button-company : rgba(89, 100, 224, 0.25);\r\n    --button-company-hover : rgba(89, 100, 224, 0.4);\r\n    --button-company-color: var(--violet);\r\n}\r\n\r\nhtml[data-theme='dark'] {\r\n    --bg: rgba(18, 23, 33, 1);\r\n    --bg-panel:rgba(25, 32, 45, 1);\r\n    --header-color: rgba(255, 255, 255, 1);\r\n    --filter-icon-color: rgba(255, 255, 255, 1);\r\n    --card-box-shadow: 0px 0px 10px -1px rgba(200,200,200,0.5);\r\n    --card-box-shadow-hover: 0px 0px 10px 1px rgba(200,200,200,0.5);\r\n    --button-company : rgba(255, 255, 255, 0.25);\r\n    --button-company-hover : rgba(255, 255, 255, 0.4);\r\n    --button-company-color:  rgba(255, 255, 255, 1);\r\n}","html,\r\nbody,\r\ndiv,\r\nspan,\r\napplet,\r\nobject,\r\niframe,\r\nh1,\r\nh2,\r\nh3,\r\nh4,\r\nh5,\r\nh6,\r\np,\r\nblockquote,\r\npre,\r\na,\r\nabbr,\r\nacronym,\r\naddress,\r\nbig,\r\ncite,\r\ncode,\r\ndel,\r\ndfn,\r\nem,\r\nbutton,\r\nimg,\r\nins,\r\nkbd,\r\nq,\r\ns,\r\nsamp,\r\nsmall,\r\nstrike,\r\nstrong,\r\nsub,\r\nsup,\r\ntt,\r\nvar,\r\nb,\r\nu,\r\ni,\r\ncenter,\r\ndl,\r\ndt,\r\ndd,\r\nol,\r\nul,\r\nli,\r\nfieldset,\r\nform,\r\nlabel,\r\nlegend,\r\ntable,\r\ncaption,\r\ntbody,\r\ntfoot,\r\nthead,\r\ntr,\r\nth,\r\ntd,\r\narticle,\r\naside,\r\ncanvas,\r\ndetails,\r\nembed,\r\nfigure,\r\nfigcaption,\r\nfooter,\r\nheader,\r\nhgroup,\r\nmenu,\r\nnav,\r\noutput,\r\nruby,\r\nsection,\r\nsummary,\r\ntime,\r\nmark,\r\naudio,\r\nvideo {\r\n  margin: 0;\r\n  padding: 0;\r\n  border: 0;\r\n  font-size: 100%;\r\n  vertical-align: baseline;\r\n}\r\n* {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n*::after, *::before {\r\n  margin: 0;\r\n  padding: 0;\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* HTML5 display-role reset for older browsers */\r\narticle,\r\naside,\r\ndetails,\r\nfigcaption,\r\nfigure,\r\nfooter,\r\nheader,\r\nhgroup,\r\nmenu,\r\nnav,\r\nsection {\r\n  display: block;\r\n}\r\nbody {\r\n  line-height: 1;\r\n  overflow-x: hidden;\r\n  position: relative;\r\n  z-index: 0;\r\n  display: flex;\r\n  flex-flow: column nowrap;\r\n  justify-content: flex-start;\r\n  align-items: center;\r\n  background-color: var(--bg);\r\n  @include flex(flex, column, flex-start, center);\r\n}\r\n\r\nblockquote,\r\nq {\r\n  quotes: none;\r\n}\r\nblockquote:before,\r\nblockquote:after,\r\nq:before,\r\nq:after {\r\n  content: \"\";\r\n  content: none;\r\n}\r\ntable {\r\n  border-collapse: collapse;\r\n  border-spacing: 0;\r\n}\r\n\r\na {\r\n  text-decoration: none;\r\n}\r\n\r\nhtml {\r\n  overflow-x: hidden;\r\n}\r\n\r\nhtml.transition,\r\nhtml.transition *,\r\nhtml.transition *::before,\r\nhtml.transition *::after {\r\n    transition: all 750ms !important;\r\n    transition-delay: 0 !important;\r\n}\r\n\r\ninput[type=text]::-ms-clear {  display: none; width : 0; height: 0; }\r\ninput[type=text]::-ms-reveal {  display: none; width : 0; height: 0; }\r\ninput[type=\"search\"]::-webkit-search-decoration,\r\ninput[type=\"search\"]::-webkit-search-cancel-button,\r\ninput[type=\"search\"]::-webkit-search-results-button,\r\ninput[type=\"search\"]::-webkit-search-results-decoration { display: none; }\r\n\r\ninput {\r\n  border: none;\r\n  outline: none;\r\n  background: transparent;\r\n}\r\nbutton{\r\n  outline: none;\r\n}\r\n\r\nbody, html {\r\n  min-height: 100vh;\r\n}\r\n\r\na {\r\n  color: var(--dark-grey);\r\n}","@mixin flex ($display: flex, $flow: row nowrap, $justify: flex-start, $align: flex-start) {\r\n    display: $display;\r\n    flex-flow: $flow;\r\n    justify-content: $justify;\r\n    align-items: $align;\r\n}\r\n\r\n@mixin absolute-el ($top, $right, $bottom, $left) {\r\n    position: absolute;\r\n    top: $top;\r\n    right: $right;\r\n    bottom: $bottom;\r\n    left: $left;\r\n}","@media screen and (min-width: 200px) {\r\n    %flex-center-center {\r\n      display: flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    %flex-between-center {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      align-items: center;\r\n      flex-flow: row nowrap;\r\n    }\r\n\r\n    %transition-0-2s {\r\n      transition: all 0.2s ease-in-out;\r\n    }\r\n  }\r\n  ",".button-switcher {\r\n    width: 48px;\r\n    height: 24px;\r\n    @extend %flex-center-center;\r\n    position: relative;\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n.button-switcher::before {\r\n    content: '';\r\n    width: 20px;\r\n    height: 19px;\r\n    @include absolute-el(unset, unset, unset, -32px);\r\n    background-image: url(/assets/desktop/icon-sun.svg);\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n.button-switcher::after {\r\n    content: '';\r\n    width: 18px;\r\n    height: 18px;\r\n    @include absolute-el(unset, -29px, unset, unset);\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    background-image: url(/assets/desktop/icon-moon.svg);\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n#switcher {\r\n    width: 48px;\r\n    height: 24px;\r\n    background: white;\r\n    border-radius: 12px;\r\n    border: none;\r\n    position: relative;\r\n    outline: none;\r\n    cursor: pointer;\r\n    padding: 0;\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n#switcher::before {\r\n    content: '';\r\n    width: 14px;\r\n    height: 14px;\r\n    border-radius: 50%;\r\n    position: absolute;\r\n    left: 4px;\r\n    top: 5px;\r\n    background-color: rgba(89, 100, 224, 1);\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n#switcher.active::before {\r\n    left: 30px;\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n\r\n.button {\r\n    background-color: var(--violet);\r\n    border-radius: 5px;\r\n    @extend %flex-center-center;\r\n    cursor: pointer;\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n.search-button {\r\n    width: 123px;\r\n    height: 48px;\r\n}\r\n\r\n.search-button-mobile {\r\n    width: 279px;\r\n    height: 48px;\r\n}\r\n\r\n.apply-button {\r\n    width: 141px;\r\n    height: 48px;\r\n}\r\n\r\n.button:hover {\r\n    background-color: rgba(147, 155, 244, 1);\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n.load-more-button {\r\n    width: 141px;\r\n    height: 48px;\r\n    margin-bottom: 50px;\r\n    display: flex;\r\n}\r\n\r\n.load-more-button.displayNone {\r\n    display: none;\r\n}\r\n\r\n.company-button {\r\n    background-color: var(--button-company);\r\n    width: 147px;\r\n    height: 48px;\r\n    border-radius: 5px;\r\n    @extend %flex-center-center;\r\n    cursor: pointer;\r\n    @extend %transition-0-2s;   \r\n}\r\n\r\n.company-button:hover {\r\n    @extend %flex-center-center;\r\n    background-color: var(--button-company-hover);\r\n}\r\n\r\n.company-button.error {\r\n    background-color: rgba(255,0,0,0.2);\r\n    color: red;\r\n    pointer-events: none;\r\n}\r\n\r\n@media screen and (max-width: 1110px) {\r\n    .search-button {\r\n        width: 80px;\r\n        height: 48px;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    .search-button {\r\n        width: 48px;\r\n        height: 48px;\r\n    }\r\n\r\n    .apply-button {\r\n        width: 279px;\r\n    }\r\n\r\n    .apply-button-footer {\r\n        width: 327px;\r\n        height: 48px;\r\n    }\r\n}","header {\r\n    background-color: var(--violet);\r\n    width: 100vw;\r\n    height: 162px;\r\n    @extend %flex-center-center;\r\n    border-radius: 0px 0px 0px 100px;\r\n    position: relative;\r\n    z-index: 1;\r\n}\r\n\r\nheader::after {\r\n    content: '';\r\n    width: 100%;\r\n    height: 100%;\r\n    @include absolute-el(0px, unset, unset, 0px);\r\n    background-image: url(/assets/desktop/bg-pattern-header.svg);\r\n    background-repeat: no-repeat;\r\n    background-size: cover;\r\n    border-radius: 0px 0px 0px 100px;\r\n    z-index: 2;\r\n}\r\n\r\n.header-wrap {\r\n    width: 1110px;\r\n    height: 32px;\r\n    @extend %flex-between-center;\r\n    position: relative;\r\n    z-index: 3;\r\n}\r\n\r\n.header-img {\r\n    cursor: pointer;\r\n    \r\n}\r\n\r\n@media screen and (max-width: 1110px) {\r\n    .header-wrap {\r\n        width: 689px;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    header {\r\n        border-radius: 0px 0px 0px 0px;\r\n    }\r\n    .header-wrap {\r\n        width: 80%;\r\n    }\r\n}",".filter {\r\n    width: 1110px;\r\n    height: 80px;\r\n    background-color: var(--bg-panel);\r\n    @include flex(flex, row, space-between, center);\r\n    padding: 16px 16px 16px 32px;\r\n    position: relative;\r\n    border-radius: 6px;\r\n    top: -40px;\r\n    z-index: 2;\r\n}\r\n\r\n.filter-search {\r\n    width: 431px;\r\n    height: 48px;\r\n    padding-left: 40px;\r\n    position: relative;\r\n}\r\n\r\n#search-bar, #search-location {\r\n    width: 94%;\r\n    height: 100%;\r\n}\r\n\r\n#icon-glass {\r\n    @include absolute-el(10px, unset, unset, 0px);\r\n}\r\n\r\n.filter-search::after, .filter-location::after {\r\n    content: '';\r\n    @include absolute-el(-16px, 0px, unset, unset);\r\n    width: 1px;\r\n    height: 80px;\r\n    opacity: 0.2;\r\n    background-color: var(--dark-grey);\r\n}\r\n\r\n.filter-location {\r\n    width: 300px;\r\n    height: 48px;\r\n    padding-left: 62px;\r\n    position: relative;\r\n}\r\n\r\n#icon-location {\r\n    @include absolute-el(10px, unset, unset, 25px); \r\n}\r\n\r\n.filter-fulltime {\r\n    width: 206px;\r\n    height: 48px;\r\n    padding-left: 32px;\r\n    position: relative;\r\n    @extend %flex-center-center;\r\n}\r\n\r\n.checkbox-wrapper {\r\n    position: absolute;\r\n    left: 35px;\r\n    top: 23px;\r\n    transform: translate(-50%, -50%);\r\n    overflow: hidden;\r\n}\r\n\r\n.checkmark {\r\n    display: block;\r\n    width: 24px;\r\n    height: 24px;\r\n    background-color: var(--gray);\r\n    border-radius: 3px;\r\n    position: relative;\r\n    transition: background-color 0.4s;\r\n    cursor: pointer;\r\n}\r\n\r\n#check:checked ~ .checkmark {\r\n    background-color: var(--violet);\r\n}\r\n\r\n.checkmark::after {\r\n    content: '';\r\n    position: absolute;\r\n    width: 8px;\r\n    height: 13px;\r\n    border-right: 2px solid #fff;\r\n    border-bottom: 2px solid #fff;\r\n    top: 40%;\r\n    left: 52%;\r\n    transform: translate(-50%, -50%) rotateZ(40deg) scale(2);\r\n    opacity: 0;\r\n    transition: all 0.4s;\r\n}\r\n\r\n#check:checked ~ .checkmark::after {\r\n    opacity: 1;\r\n    transform: translate(-50%, -50%) rotateZ(40deg) scale(1);\r\n}\r\n\r\n#icon-filter, .search-button-wrapper-mobile, .dark-overlay {\r\n    display: none;\r\n}\r\n\r\n@media screen and (max-width: 1110px) {\r\n    .filter {\r\n        width: 689px;\r\n    }\r\n    \r\n    .filter-search {\r\n        width: 200px;\r\n    }\r\n    \r\n    .filter-location {\r\n        width: 213px;\r\n        padding-left: 57px;\r\n    }\r\n    \r\n    .filter-fulltime {\r\n        width: 156px;\r\n        padding-left: 32px;\r\n        position: relative;\r\n    }\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    .filter {\r\n        width: 327px;\r\n        padding: 16px 16px 16px 24px;\r\n    }\r\n    \r\n    .filter-search {\r\n        width: 231px;\r\n        padding-left: 0px;\r\n    }\r\n    \r\n    #search-bar, #search-location {\r\n        width: 76%;\r\n        height: 100%;\r\n    }\r\n    \r\n    #icon-glass, .filter-search::after {\r\n        display: none;\r\n    }\r\n    \r\n    .filter-location::after {\r\n        @include absolute-el(unset, unset, 0px, 0px);\r\n        width: 327px;\r\n        height: 1px;\r\n        z-index: 3;\r\n    }\r\n    \r\n    .filter-location {\r\n        width: 327px;\r\n        height: 60px;\r\n        padding-left: 57px;\r\n        @include absolute-el(unset, unset, -100px, 0px);\r\n        background-color: var(--bg-panel);\r\n        border-radius: 6px 6px 0px 0px;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        transition: 0.2s ease-in-out;\r\n    }\r\n    \r\n    #icon-location {\r\n        @include absolute-el(15px, unset, unset, 20px); \r\n        z-index: 3;\r\n    }\r\n    \r\n    .filter-fulltime {\r\n        width: 327px;\r\n        height: 60px;\r\n        padding-left: 58px;\r\n        padding-top: 9px;\r\n        @include absolute-el(unset, unset, -150px, 0px);\r\n        @include flex(flex, row, flex-start, center);\r\n        background-color: var(--bg-panel);\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        transition: 0.2s ease-in-out;\r\n    }\r\n    \r\n    .checkbox-wrapper {\r\n        @include absolute-el(33px, unset, unset, 29px);\r\n    }\r\n\r\n    #icon-filter {\r\n        display: block;\r\n        @include absolute-el(unset, 85px, unset, unset);\r\n        cursor: pointer;\r\n    }\r\n\r\n    #icon-filter > path {\r\n        fill: var(--filter-icon-color);\r\n    }\r\n\r\n    .search-button-wrapper-mobile {\r\n        @include flex(flex, row, center, center);\r\n        background-color: var(--bg-panel);\r\n        width: 327px;\r\n        height: 85px;\r\n        @include absolute-el(unset, unset, -220px, 0px);\r\n        z-index: 3;\r\n        opacity: 0;\r\n        pointer-events: none;\r\n        border-radius: 0px 0px 6px 6px;\r\n        transition: 0.2s ease-in-out;\r\n    }\r\n\r\n    .dark-overlay {\r\n        display: block;\r\n        background: rgba(0, 0, 0, 0.5);\r\n        width: 100vw;\r\n        height: 100vh;\r\n        @include absolute-el(0px, unset, unset, 0px);\r\n        opacity: 0;\r\n        z-index: 1;\r\n        transition: 0.2s ease-in-out;\r\n        pointer-events: none;\r\n    }\r\n\r\n    .dark-overlay.active, .search-button-wrapper-mobile.active, \r\n    .filter-fulltime.active, .filter-location.active {\r\n        opacity: 1;\r\n        pointer-events: all;\r\n        transition: 0.2s ease-in-out;\r\n    }\r\n    \r\n}",".jobs {\r\n    width: 1110px;\r\n    @include flex(flex, row wrap, space-between, center);\r\n    margin-top: 80px;\r\n    position: relative;\r\n    height: auto;\r\n}\r\n\r\n.jobs.detail-display {\r\n    width: 730px;\r\n    margin: 0px;\r\n    top: -40px;\r\n}\r\n\r\n.job { \r\n    margin-bottom: 65px;\r\n}\r\n\r\n.job-card {\r\n    background-color: var(--bg-panel);\r\n    width: 350px;\r\n    height: 228px;\r\n    padding: 49px 32px 32px 32px;\r\n    @include flex(flex, column, space-between, flex-start);\r\n    position: relative;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    box-shadow: var(--card-box-shadow);\r\n    transform: scale(1.0);\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n.job-card:hover {\r\n    box-shadow: var(--card-box-shadow-hover);\r\n    transform: scale(1.05);\r\n    @extend %transition-0-2s;\r\n}\r\n\r\n.job-card > img {\r\n    @include absolute-el(-25px, unset, unset, unset);\r\n    width: 50px;\r\n    height: 50px;\r\n    border-radius: 15px;\r\n    background-color: var(--bg-panel);\r\n}\r\n\r\n.job-circle {\r\n    font-size: 30px;\r\n}\r\n\r\n@media screen and (max-width: 1110px) {\r\n    .jobs {\r\n        width: 689px;\r\n        margin-top: 85px;\r\n    }\r\n    \r\n    .job-card {\r\n        box-shadow: none;\r\n        width: 339px;\r\n        padding: 49px 21px 32px 32px;\r\n    }\r\n\r\n    .job-card:hover {\r\n        transform: scale(1);\r\n    }\r\n    \r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    .jobs {\r\n        width: 327px;\r\n       \r\n        @include flex(flex, column, space-between, center);\r\n        margin-top: 72px;\r\n    }\r\n    \r\n    .job-card {\r\n        width: 327px;\r\n        height: 228px;\r\n    }\r\n    \r\n}",".job-detail-out, .job-detail-on > .job-card  {\r\n    display: none;\r\n}\r\n\r\n.job.job-detail-on{\r\n    transition: 0s;\r\n}\r\n\r\n.job {\r\n    transition: 0s;\r\n}\r\n\r\n.job-detail {\r\n    @include absolute-el(0px, unset, unset, unset);\r\n    z-index: 3;\r\n    display: none;\r\n}\r\n\r\n.job-detail-on > .job-detail {\r\n    @include flex(flex, column, space-between, center)\r\n}\r\n\r\n// Job detail header\r\n\r\n.job-detail-header {\r\n    width: 730px;\r\n    height: 140px;\r\n    @include flex(flex, row, flex-start, center);\r\n    background-color: var(--bg-panel);\r\n    position: relative;\r\n    z-index: 3;\r\n    border-radius: 6px;\r\n}\r\n\r\n.job-detail-header > img {\r\n    background-color: var(--header-color);\r\n    width: 140px;\r\n    height: 140px;\r\n    border-radius: 6px 0px 0px 6px;\r\n}\r\n\r\n.job-detail-header > .job-detail-header-desc {\r\n    width: 507px;\r\n    height: 53px;\r\n    @extend %flex-between-center;\r\n    margin-left: 40px;\r\n    position: relative;\r\n}\r\n\r\n.job-detail-header-desc > div {\r\n    @include flex(flex, column, space-between, flex-start);\r\n    height: 100%;\r\n    position: relative;\r\n    \r\n}\r\n\r\n.company-button {\r\n    pointer-events: all;\r\n}\r\n\r\np.error {\r\n    @include absolute-el(unset, 22px, -25px, unset);\r\n    z-index: 4;\r\n    display: none;\r\n}\r\n\r\np.error.active {\r\n    display: block;\r\n}\r\n\r\n// Job detail desc\r\n\r\n.job-detail-desc {\r\n    margin-top: 32px;\r\n    width: 730px;\r\n    padding: 48px 43px 48px 48px;\r\n    background-color: var(--bg-panel);\r\n    position: relative;\r\n    z-index: 3;\r\n}\r\n\r\n.job-detail-desc > p, .job-detail-desc > a, .job-detail-desc > ul > li {\r\n    margin: 10px 0px 10px 0px;\r\n}\r\n\r\n.job-detail-desc > * > strong {\r\n    font-size: 20px;\r\n    color: var(--header-color);\r\n}\r\n\r\n.apply-button-desc {\r\n    @include absolute-el(68px, 43px, unset, unset);\r\n}\r\n\r\n.job-detail-desc-title, .detail-footer-header {\r\n    color: var(--header-color) !important;\r\n}\r\n\r\n// Job detail How to apply\r\n\r\n.job-detail-apply {\r\n    background-color: var(--violet);\r\n    padding: 40px 43px 41px 48px;\r\n    position: relative;\r\n    z-index: 3;\r\n    margin-top: 32px;\r\n    border-radius: 5px;\r\n    width: 730px;\r\n    height: auto;\r\n    margin-bottom: 172px;\r\n}\r\n\r\n.job-detail-apply::after {\r\n    content: '';\r\n    border-radius: 5px;\r\n    width: 100%;\r\n    height: 100%;\r\n    background-image: url(/assets/desktop/bg-pattern-detail-footer.svg);\r\n    @include absolute-el(0px, unset, unset, 0px);\r\n    z-index: 4;\r\n}\r\n\r\n.job-detail-apply > * {\r\n    position: relative;\r\n    z-index: 5;\r\n}\r\n\r\n.job-detail-apply > a, .job-detail-desc > a, .job-detail-apply > p > a, .job-detail-desc > p > a {\r\n    text-decoration: underline;\r\n}\r\n\r\n.job-detail-apply > p:first-child {\r\n    color: white;\r\n}\r\n\r\n     // Job detail footer\r\n\r\n.job-detail-footer {\r\n    width: 100vw;\r\n    height: 96px;\r\n    background-color: var(--bg-panel);\r\n    @extend %flex-center-center;\r\n    @include absolute-el(unset, unset, 0px, unset);\r\n    z-index: 3;\r\n}\r\n\r\n.job-detail-footer-wrap {\r\n    width: 730px;\r\n    height: 50px;\r\n    @include flex(flex, column, space-between, flex-start);\r\n    flex-flow: column;\r\n    position: relative;\r\n}\r\n\r\n.apply-button-footer {\r\n    @include absolute-el(unset, 0px, unset, unset); \r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    .job.job-detail-on {\r\n        @include flex(flex, column, space-between, center)\r\n    }\r\n    .job-detail {\r\n        @include absolute-el(0px, unset, unset, unset);\r\n    }\r\n    \r\n    .job-detail-on > .job-detail {\r\n        @include flex(flex, column, space-between, center)\r\n    }\r\n    \r\n    // Job detail header\r\n    \r\n    .job-detail-header {\r\n        width: 327px;\r\n        height: 205px;\r\n        @include flex(flex, row, center, center);\r\n    }\r\n    \r\n    .job-detail-header > img {\r\n        width: 50px;\r\n        height: 50px;\r\n        border-radius: 6px;\r\n        @include absolute-el(-25px, unset, unset, unset);\r\n        left: 50%;\r\n        transform: translateX(-50%);\r\n        transition: 0s;\r\n    }\r\n    \r\n    .job-detail-header > .job-detail-header-desc {\r\n        width: 147px;\r\n        height: 124px;\r\n        @include flex(flex, column, space-between, center);\r\n        margin-left: 0px;\r\n    }\r\n    \r\n    .job-detail-header-desc > div {\r\n        @include flex(flex, column, space-between, center);\r\n        height: auto;\r\n        min-height: 52px;\r\n    }\r\n    \r\n    // Job detail desc\r\n    \r\n    .job-detail-desc {\r\n        margin-top: 24px;\r\n        width: 327px;\r\n        padding: 40px 24px 32px 24px;\r\n    }\r\n    \r\n    .job-detail-desc > p, .job-detail-desc > a, .job-detail-desc > ul > li,\r\n    .job-detail-apply > p, .job-detail-apply > a, .job-detail-apply > ul > li {\r\n        margin: 12px 0px 12px 0px;\r\n    }\r\n    \r\n    .job-detail-desc > * > strong {\r\n        font-size: 18px;\r\n    }\r\n    \r\n    .apply-button-desc {\r\n        @include absolute-el(167px, 23px, unset, unset);\r\n    }\r\n\r\n    .job-detail-desc > .job-card-location {\r\n        margin-bottom: 112px;\r\n    }\r\n\r\n    .job-detail-desc > p {\r\n        overflow: hidden;\r\n    }\r\n    \r\n    // Job detail How to apply\r\n    \r\n    .job-detail-apply {\r\n        padding: 32px;\r\n        width: 327px;\r\n        margin-bottom: 172px;\r\n    }\r\n    \r\n    .job-detail-apply::after {\r\n        background-image: url(/assets/mobile/bg-pattern-detail-footer.svg);\r\n    }\r\n    \r\n    // Job detail footer\r\n    \r\n    .job-detail-footer-wrap {\r\n        width: 375px;\r\n        height: 100%;\r\n        @include flex(flex, column, center, center);\r\n        position: relative;\r\n    }\r\n\r\n    .job-detail-footer-wrap > p {\r\n        display: none;\r\n    }\r\n    \r\n    .apply-button-footer {\r\n        position: relative;\r\n        width: 1;\r\n    }\r\n}","@keyframes rotate360 {\r\n    to { transform: rotate(360deg);}\r\n}\r\n\r\n#loader {\r\n    width: 300px;\r\n    height: 300px;\r\n    margin-top: 50px;\r\n    animation: 1.5s rotate360 infinite linear;\r\n    display: none;\r\n}\r\n\r\n#loader.active {\r\n    display: block;\r\n}\r\n\r\n@media screen and (max-width: 768px) {\r\n    #loader {\r\n        width: 150px;\r\n        height: 150px;\r\n    }\r\n}\r\n\r\n/* updateTodoList(await getTodoItems());\r\n\r\nconst getTodoItems = async () => {\r\n    try {\r\n      const response = await axios.get(`${BASE_URL}/todos?_limit=5`);\r\n  \r\n      const todoItems = response.data;\r\n  \r\n      console.log(`GET: Here's the list of todos`, todoItems);\r\n  \r\n      return todoItems;\r\n    } catch (errors) {\r\n      console.error(errors);\r\n    }\r\n  }; */",".error-display {\r\n    position: relative;\r\n    @include flex(flex, column, space-between, center);\r\n    height: 320px;\r\n    text-align: center;\r\n    display: none;\r\n}\r\n\r\n.error-display.active {\r\n    display: flex;\r\n}"]}