/*

Theme Name: Strawberry

Version: 1.0

Author: Nicu Voicu

Author URI: http://nicuvoicu.com/

Description:  Strawberry Custom Theme

License: GNU General Public License v2 or later

License URI: http://www.gnu.org/licenses/gpl-2.0.html

Text Domain: strawberry

*/

img{

    height: auto;

    aspect-ratio: auto 24/5;

}



.custom-nav li a>img

{

    max-width: 36px;

    max-height: 36px;

}



/* single job section */

.container-width

{

    margin: 2em;

}



section.content,

section.form

{

    margin: 0;

}



.job-container

{

    background-color: #FAFAFA;

}



.job-container + footer

{

    margin-top: 0;

}



.job-container .hero,

.jobs-listing .hero

{

    height: 350px;

    position: relative;

}



.job-container .hero h1,

.jobs-listing .hero h1

{

    line-height: 1;

    font-weight: 700;

}



.job-container .hero img,

.jobs-listing .hero img

{

    height: 100%;

    width: 100%;

    object-fit: cover;

    object-position: top;

}



.job-container .hero img{

    object-position: left 65%;

}



.jobs-listing .hero img

{

    margin-top: 56px;

}



.job-container .hero::before,

.jobs-listing .hero::before

{

    background-color: rgba(0,33,145,.54);

}



.title-set

{

    width: 100%;

    position: absolute;

    bottom: 0;

    left: 0;

}



.title-set .container-width{

    margin: 0 .23em;

}



.title-set .container-width h1

{

    text-align: left;

}



.job-container .breadcrumb,

.jobs-listing .breadcrumb

{

    padding: 0;

}



.jobs-listing .breadcrumb

{

    margin-bottom: 2em;

}



.detail-bar{

    margin: 1em 0 3em 0;

    gap: 2em;

}



.detail-bar > div{

    gap: 1em;

}



.detail-bar,

.detail-bar > div

{

    display: flex;

    flex-direction: row;

    align-items: center;

    flex-wrap: wrap;

    justify-content: space-between;

}



.detail-bar .location{

    width: 100%;

    align-items: flex-start;

    justify-content: flex-start;

}





.detail-bar h4

{

    margin: 0;

    color:#6A6A6A;

    font-weight: 700;

    font-size: 17px;

}



.detail-bar label,

.form label

{

    color: #00619A;

    font-size: 13px;

    font-weight: 700;

}



.detail-bar label{

    font-size: 11px;

}



.job-details{

    display: grid;

    grid-template-columns: 1fr;

    gap: 2em ;

    margin: 0 0 5em 0;

}



.job-container .content

{

    display: grid;

    grid-template-rows: auto max-content 1fr;

}



.job-details>div

{

    display:grid;

    grid-template-rows: auto 1fr;

}

.job-details p

{

    line-height: 1.8em;

}



.job-details ul

{

    padding-left: 1em;

   

}



.job-details ul li::marker{

    color: #00619A;

}



.detail-bar .location img

{

    margin: 0;

}





.job-details h3,

.recent-job-posts h3,

.form h3,

.featured-job h4,

.job-item h3

{

    color: #00619A;

    font-weight: 700;

}



.job-container .card,

.job-item.card{

    background-color:  #fff;

    border-radius: 4px;

    box-shadow: 0 3px 1em rgba(0,0,0,.16);

    min-height: 2em;

    padding: 1em;

    transition: all .25s ease-in-out;

}



.job-container .card:not(:last-of-type)

{

    margin-bottom: 2em;

}



.job-item.card.hide

{

   display: none;

}





.form input[type="text"],

.form input[type="tel"],

.form input[type="email"]

{

    min-height: 52px;

    border: 1px solid #D3D3D3;

    border-radius: 4px;

    display: block;

    width: 100%;

    margin-bottom: 1.5em;

    padding: 1em;

}



.form input[type="submit"]{

    color: #fff;

    background-color: #00619A;

    border-radius: 4px;

    font-size: 20px;

    font-weight: 700;

    padding: 1em;

}



.form hr

{

    border: none;

    border-bottom: 1px solid rgba(0,97,154,.5);

    width: 100%;

    margin: 1em 0;

}



.form .input-and-text

{

    display: flex;

    gap: 2em;

    justify-content: space-between;

    align-items: flex-end;

    margin-top: auto;

    margin-bottom: 0;

}



.label-and-input

{

    display: flex;

    flex-direction: column;

}



.form .input-and-text p

{

    margin: 0;

    font-size: 12px;

    color: #606060;

    opacity: .75;

}



.custom-file-upload .info

{

    display: flex;


}



.custom-file-upload .info span,

.custom-check label+span {

    

    font-size: 12px;

    color: #606060;

    opacity: .5;

}



.custom-file-upload img

{

    aspect-ratio: 1/1;

    margin: 0;
    margin-right: 2px;

}



.custom-file-upload>img

{

    margin-right: 1em;

}


/* ---------------------------------------------------------------------------------------- */

/* .custom-file-upload input[type="file"]{

    opacity: 0;

    display: none;

} */



.hidden-upload

{

    margin-right: 0;

    margin-left: auto;

    width: 100%;

}



.hidden-upload label{

    text-align: right;

    display: block;

}



.hidden-upload+.errorMessage{

    margin-top: .25em;

    border-top-left-radius: 4px;

    border-top-right-radius: 4px;

}



.recent-job-posts.container-width

{

   margin: 3rem 2em;

}



.custom-check

{

    display: flex;

    flex-direction: row;

    align-items: center;

    flex-wrap: wrap;

  



}


/* ------------------------------------------------------------------------------------------------- */

/* .custom-check input[type="checkbox"]+label

{

    margin-right: 1em;

    width: 36px;

    height: 36px;

    background: url("./assets/images/svg/unchecked.svg") no-repeat  center center;

    background-size: 99%;

    transition: background .25s ease-in-out;

} */



.custom-check input[type="checkbox"]:checked+label

{

    background: url("./assets/images/svg/checked.svg") no-repeat  center center;

    background-size: 99%;

}



.custom-check span:not(.errorMessage){

    width: calc(100% - 55px);

}



.errorMessage{

    display: block;

    background-color: #dc3545;

    color: #fff;

    width: 100%;

    padding: .25em;

    border-bottom-left-radius: 4px;

    border-bottom-right-radius:4px ;

}



.custom-check .errorMessage{

    margin-top: .5em;

    border-top-right-radius: 4px;

    border-top-left-radius: 4px;

}



.form input[type="text"]+.errorMessage,

.form input[type="tel"]+.errorMessage,

.form input[type="email"]+.errorMessage{

    margin-top: -1.5em;

    margin-bottom: 1em;

}



.form input[type="text"].errorOnField,

.form input[type="tel"].errorOnField,

.form input[type="email"].errorOnField

{

    border-bottom-left-radius: 0;

    border-bottom-right-radius: 0;

    border-color:  #dc3545;

}



.featured-job.card > div

{

    display: flex;

    width: 100%;

}



.featured-job.card a

{

    color: #00619A;

    margin: 0 0 0 auto;

    display: flex;

    align-items: center;

}



.featured-job.card a img

{

    margin-left: .5em;

    transition: transform .25s ease;

}



.featured-job.card a:hover img

{

    transform: scale(1.35);

}



.featured-job h4,

.featured-job p

{

    margin-bottom: 0;

}



.filters

{

    background: #fff;

    box-shadow: 0 3px 1em rgba(0,0,0,.16);

    border-radius: 4px;

    overflow: hidden;

    display: flex;

    flex-direction: column;

    align-items: center; 

}





.filters .title,

.filters button,

.filters a

{

    color: #fff;

    background-color: #00619A;

    font-weight: 700;

    font-size: 17px;

    width: 100%;

}

.filters a 

{

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 48px;

    border-radius: 4px;

    white-space: nowrap;

    padding: 0 5px;

}

.filters .title

{

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.filters .title p

{

    margin: 0;

}



.filters  .filter-from ,

.filters  .filter-from > div{

    width: 100%;

}

.filters  .filter-from

{

    display: flex;

    gap: 1.5em;

    padding: 1em;

    flex-direction: column;

}

.filters select

{

    min-height: 48px;

    border-radius: 4px;

    padding: 1em;

}



.filters button

{

    min-height: 48px;

    border-radius: 4px;

    white-space: nowrap;

}



.filters button:hover

{

    cursor: pointer;

    background-color: #012c46;

}



.job-item.card 

{

    min-height: 300px;

    overflow: hidden;

    padding: unset;

    display: grid;

    grid-template-columns:1fr;

}



.job-item .image-container img{

    max-width: unset;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: left;

}



.job-item .image-container

{   

    height: 100%;

}



.jobs-list.container-width{

    display: grid;

    gap: 2em;

}



.jobs-list .text-content

{

    padding: 1.5em;

    display: flex;

    flex-direction: column;

}



.jobs-list .date-and-link

{

    margin-top: auto;

    margin-bottom: 0;

}



.jobs-list .post-link img{

    margin: 0;

    aspect-ratio: 1/1;

    display: inline-block;

    vertical-align: middle;

}



.job-item h3

{

    margin: 0 0 .25em 0;

    line-height: 1;

}



.job-item h3 + p

{

    margin: 0;

    line-height: 1;

    text-transform: uppercase;

    opacity: .5;

}



.job-item .info

{

    margin-top: 1em;

    display: flex;

    flex-wrap: wrap;

}



.job-item .info span

{

    font-weight: 700;

    display: block;

    color: #444444;

}



.job-item .info p

{

    color:#00619A;

    flex: 1;

}



.job-item .info hr

{

    width: 100%;

    border: none;

    border-bottom: 1px solid #707070;

    opacity: .3;

    margin-bottom: 1em;

}



.date-and-link

{

    display: flex;

    justify-content: space-between;

}



.date-and-link .date

{

    color: #444444;

    opacity: .4;

    display: none;

}   



.date-and-link .post-link

{

    color: #00619A;

}



.date-and-link .post-link img

{

    margin-left: 1em;

}



.job-container .hero

{

    background: #fff;

}

.job-container .hero img

{

    

    height: 100%;

    width: 100%;





    object-position: left;

    object-fit: cover;

}



#submission_form{

    position: relative;

}



.notification

{

    display: none;

    top: 0;

    left: 0;

    position: absolute;

    /* border: 4px solid rgb(25,135,84); */

    width: 100%;

    height: 100%;

    border-radius: 4px;

    overflow: hidden;

}



.notification .message.success{

    background: #d7ebf6;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    height: 100%;

}



.notification .message.success img

{

    margin: 2.5em 0 ;

}



.notification .message.success h3{

    color: #00619A;
    text-align: center;
}

/*------------------------------------------   Job filter design - START  ------------------------------------------*/


.filters a.clear-filter {
    background: #dc3545;
}

.filters a.clear-filter:hover,
.filters a.clear-filter:focus,
.filters a.clear-filter:active {
    background: #871e28;
}

/*------------------------------------------   Job filter design - END  ------------------------------------------*/


/*------------------------------------------   Single job page design - START  ------------------------------------------*/

.title-set .container-width {
    margin-bottom: 5px;
}

.title-set .container-width .job-page-title {
    margin-bottom: 15px;
}

.title-set .container-width div {
    display: flex;
}

.title-set .container-width h1 {
    margin-bottom: 5px;
    font-size: 40px;
}

.title-set .container-width div p {
    font-size: 12px;
    opacity: 0.7;
    padding-inline: 5px;
    margin-bottom: 2px;
}

.job-container .title-set .container-width {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
}

/*------------------------------------------   Single job page design - END  ------------------------------------------*/

/* ------------------------------------------  Footer - START  ------------------------------------------ */

.footer_links {
    display: flex;
    max-width: fit-content;
    margin: 0 auto 0;
}

.footer_links {
    display: flex;
}

footer .container:before {
    display: none;
}
footer .container:after {
    display: none;
}

.onjn_link img, .responsible_gambling img {
    margin-top: 30px;
}

/* ------------------------------------------  Footer - END  ------------------------------------------ */

/*------------------------------------------  Jobs custom form design - START  ------------------------------------------ */

.x-button {
    position: relative;
    bottom: 3px;
    cursor: pointer;
    color: rgb(223, 18, 18);
    z-index: 99;
}

.x-button:hover,
.x-button:focus,
.x-button:active {
    color: #871e28;
}

.invisible {
    display: none;
}

.fixed-position {
    height: 100%;
    overflow: hidden;
}

.no_job {
    text-align: center;
}

.custom-file-upload
{
    display: flex;
    flex-wrap: inherit;
}

.custom-check input[type="checkbox"]:checked+label {
    background: url("./assets/images/svg/checked.svg") no-repeat  center center;
    background-size: 100%;
}

.custom-check {
    position: relative;
}

.custom-check label:first-of-type {
    background-color: #fff;
    border: 2px solid #00619a;
    border-radius: 50%;
    cursor: pointer;
    height: 28px;
    left: 0;
    position: absolute;
    top: 0;
    width: 28px;
}

.custom-check label:first-of-type:after {
    border: 4px solid #2b9adb;
    border-top: none;
    border-right: none;
    content: "";
    height: 6px;
    left: 7px;
    opacity: 0;
    position: absolute;
    top: 8px;
    transform: rotate(-45deg);
    width: 12px;
}

.custom-check label:last-of-type {
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 4px;
    cursor: default;
}


.form label {
    cursor: pointer;
}

.custom-check #terms{
    cursor: pointer;
}

.label-and-input {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.btn_upload {
    color: #00619a;
    background-color: white;
    padding: 0px;
    font-size: 13px;
    font-weight: bold;
    text-transform: none; 

    text-align: left;
    width: 130px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap; 
}

.btn_upload:hover,
.btn_upload:active,
.btn_upload:focus {
    color: #2b9adb;
    z-index: -1;
    position: absolute;
}

#upload {
    z-index: 10;
    position: absolute;
    padding: 10px;
    opacity: 0;
}

.label-and-input [type=file] {
    font-size: 20px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
    z-index: -1;
}

input #term {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
} 

.form input[type="number"] {
    -moz-appearance: textfield;
}

.custom-check input[type="checkbox"]+label {
    cursor: pointer;
}

.form input[type="submit"]:hover,
.form input[type="submit"]:focus,
.form input[type="submit"]:active {
    background-color: #1d82bd;
    cursor: pointer;
}

.form input[type="text"]:focus:invalid,
.form input[type="tel"]:focus:invalid,
.form input[type="email"]:focus:invalid {
    border: 1px solid rgb(209, 24, 24);
}
  
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.form input[type="email"],
.form input[type="tel"],
.form input[type="text"],
.form select:focus,
.form textarea  {
  font-size: 16px;
}


/*------------------------------------------  Jobs custom form design - END  ------------------------------------------*/



@media screen and (min-width:600px) {

    .detail-bar .location {

        width: fit-content;

    }

    /* ------------------ FOOTER ----------------------- */

    .onjn_link img, .responsible_gambling img {
        margin-top: 10px;
    }

    /* ------------------ FOOTER ----------------------- */

}



@media screen and (min-width:900px) {

    .job-container .hero img{

        object-position: right;

        object-fit: contain;

    }


/* --------------------  Single job page design - START  ----------------------    */
    .job-container .title-set,
    .job-container .title-set .container-width {
        margin-bottom: 5px;

    }

    .title-set .container-width h1 {
        font-size: 55px;
    }

    .job-container .title-set .container-width h1 {
        margin-bottom: 5px;
    }

/* --------------------  Single job page design - END  ----------------------    */


    .detail-bar label{

        font-size: 14px;

    }

    .detail-bar h4{

        font-size: 26px;

    }

}





@media screen and (min-width:980px) {

    .job-item.card{

        grid-template-columns: 65% 1fr;

    }



    .date-and-link .date

    {

        display: block;

    }



    .job-item .info hr

    {

        display: none;

    }

    .job-item .info

    {

        flex-direction: column;

    }

    .hidden-upload

    {

        width: 35%;

    }



    .job-details{

        gap: 0 2em;

        grid-template-columns: repeat(3,1fr);

    }



    .detail-bar {

        justify-content: flex-start;

    }
    

}



@media screen and (min-width:1240px) {

    

    .filters

    {

        height: 80px;

        flex-direction: row;

    }



    

    .filters .title

    {

        height: 100%;

        width: 20%;

    }



    .filters.container-width{

        margin: 3em auto;

    }



    .job-container .hero, .jobs-listing .hero

    {

        height: 440px;

        min-height: 440px;

    }





    

    .job-single-frame

    {

        display: grid;

        grid-template-columns: 65% 1fr;

        gap:2em;

    }



    .recent-job-posts .grid-layout

    {

        display: grid;

        gap: 2em;

        grid-template-columns: repeat(4,1fr);

    }



    .filters.container-width,

    .jobs-list.container-width

    {

        width: 1110px;

    }



    .jobs-list.container-width

    {

        margin: 2em auto;

    }



    .filters  .filter-from

    {

        flex-direction: row;

    }

     

    .filters button{

        width: max-content;

    }


    .filters a {
        width: max-content;
    }



    .job-container .card:not(:last-of-type)

    {

        margin-bottom: 0em;

    }



    .job-details

    {

        margin: 0;

    }    

    



}



@media screen and (min-width:1440px ) {

    .jobs-listing .hero img{

       margin-top: 90px;

    }

}



@media screen and (min-width: 1740px ) {

    .container-width

    {

        max-width: 1670px;

        margin: 2em auto;

    }



    .recent-job-posts.container-width

    {

        margin: 3em auto;

    }



    .title-set .container-width

    {

        margin: 0 auto;

    }



}