/*
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/JSP_Servlet/CascadeStyleSheet.css to edit this template
*/
/* 
    Created on : Aug 19, 2024, 11:32:00 AM
    Author     : mitt
*/

/* Tablet (min-width: 600px and max-width: 900px) */

/*.custom-grid .ui-datagrid-column {
    width:100%; 
}

.ui-datagrid-column {
    height: 25rem;
}*/


@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .ui-message-error {
        width: 28.125rem;
    }
    h1 {
        font-size: 1.5rem;
        padding-bottom: 0.625rem;
    }
    h2 {
        font-size: 1.4rem;
        padding-bottom: 0.625rem;
        padding-top: 0.625rem;
    }
    h3 {
        font-size: 1.2rem;
        padding-bottom: 1.25rem;
    }
    h4 {
        font-size: 1rem;
        padding-bottom: 1.25rem;
    }
    .text.left p {
        font-size: 0.95rem;
    }
    .smaller {
        font-size: 0.7rem;
    }
    #topS3e.header .top-title,
    #menuS3e ul,
    #content-wrapperS3e {
        width: 58.75rem;
    }
    
    .trombine-col {
        margin-left:3px !important;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    .ui-message-error {
        width: 21.875rem;
    }
    h1 {
        font-size: 1.2rem;
        padding-bottom: 0.5rem;
    }
    h2 {
        font-size: 1.1rem;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
    h3 {
        font-size: 1rem;
        padding-bottom: 0.5rem;
    }
    h4 {
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }
    .text.left p {
        font-size: 0.875rem;
    }
    .smaller {
        font-size: 0.6rem;
    }
    #topS3e.header .top-title,
    #menuS3e ul,
    #content-wrapperS3e {
        width: 35rem;
    }
    
    .trombine-col {
        margin-left:0px !important;
    }
    
    .ui-carousel-header{
    margin-left: 1rem;
    }
}


/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    #topS3e .top-login {
        height: 2.375rem;
        line-height: 2.375rem;
        width: 58.75rem;
    }
    #topS3e .top-username {
        font-size: 1.125rem;
    }
    #top-menubuttonS3e_menu a {
        font-size: 1rem;
    }
    #topS3e .top-login a {
        font-size: 1.125rem;
        padding-left: 1.5625rem;
        padding-right: 1.875rem;
        right: 2.5rem;
        margin-left: 2.5rem;
    }
    #topS3e.header .top-title {
        padding: 0.625rem 0;
        height: 8.4375rem;
    }
    #topS3e.header .top-title h1 {
        font-size: 2rem;
        padding-bottom: 0.3125rem;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    #topS3e .top-login {
        height: 2rem;
        line-height: 2rem;
        width: 35rem;
    }
    #topS3e .top-username {
        font-size: 1rem;
    }
    #top-menubuttonS3e_menu a {
        font-size: 0.875rem;
    }
    #topS3e .top-login a {
        font-size: 1rem;
        padding-left: 1.25rem;
        padding-right: 1.5625rem;
        right: 2rem;
        margin-left: 2rem;
    }
    #topS3e.header .top-title {
        padding: 0.5rem 0;
        height: 7rem;
    }
    #topS3e.header .top-title h1 {
        font-size: 1.5rem;
        padding-bottom: 0.25rem;
    }
}

/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    #topS3e.header .top-title h2 {
        font-size: 2.5rem;
        padding-bottom: 0.3125rem;
    }

    #top-sidebar {
        width: 21.875rem;
        height: 8.75rem;
        transform: translate(-1.3125rem, 0);
    }

    #top-img {
        width: 21.875rem;
        height: 8.75rem;
    }

    #topS3e #top-customer {
        width: 12.6875rem;
        height: 7.5rem;
        background-size: 7.5rem;
        left: 2.5rem;
    }

    #blank-menuS3e {
        height: 0.3125rem;
    }

    #menuS3e {
        /*height: 2.375rem;*/
    }

    #menuS3e ul li {
        width: 23%;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    #topS3e.header .top-title h2 {
        font-size: 2rem;
        padding-bottom: 0.3125rem;
    }

    #top-sidebar {
        width: 18.75rem;
        height: 7rem;
        transform: translate(-1.3125rem, 0);
    }

    #top-img {
        width: 18.75rem;
        height: 7rem;
    }

    #topS3e #top-customer {
        width: 10rem;
        height: 6rem;
        background-size: 6rem;
        left: 2rem;
    }

    #blank-menuS3e {
        height: 0.3125rem;
    }

    #menuS3e {
      /*  height: 2rem;*/
    }

    #menuS3e ul li {
        width: 22%;
    }
}

/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    #menuS3e a {
        line-height: 2.375rem;
        height: 2.375rem;
        font-size: 1rem;
    }
    #menuS3e a:before {
        font-size: 0.875rem;
        margin-right: 0.3125rem;
        top: -0.125rem;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    #menuS3e a {
        line-height: 2rem;
        height: 2rem;
        font-size: 0.875rem;
    }
    #menuS3e a:before {
        font-size: 0.75rem;
        margin-right: 0.25rem;
        top: -0.125rem;
    }
}

/* Shared Styles for Tablet and Mobile */
@media only screen and (max-width: 56.25rem) {
    #menuS3e ul li.school-item:hover,
    #menuS3e ul li.school-item.selected {
        background-color: white;
    }

    #menuS3e a:hover, #menuS3e ul li.selected a {
        color: black;
    }

    #menuS3e ul li.home-item a:before {
        color: #28ace1;
    }

    #menuS3e ul li.students-item a:before {
        color: #f29132;
    }

    #menuS3e ul li.sponsors-item a:before {
        color: #ea5425;
    }

    #menuS3e ul li.parents-item a:after {
        color: #6b991d;
    }

    #menuS3e ul li.school-item a:before {
        color: #48ad3c;
    }

    #menuS3e ul li:hover a:after,
    #menuS3e ul li.selected a:after {
        color: #ffffff;
    }

    /*** Menu Filter ***/
    #menuFilter {
        height: 2.375rem;
    }

    #menuFilter ul li a {
        color: #000000;
    }

    #menuFilter .ui-tabs-panels {
        border: 1px solid #a8a8a8;
    }

    #menuFilter .ui-tab {
        border: none;
    }

    #menuFilter .ui-widget-content {
        border: none;
    }
}

/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    #bottom {
        width: 58.75rem;
        padding: 1.875rem 0;
    }

    .footerImages img:last-child {
        padding-right: 0.625rem;
    }

    .footerImages img {
        padding-left: 1.5625rem;
    }

    .footerText {
        line-height: 1.0625rem;
        margin-top: 0.625rem;
        width: 75%;
    }

    #footer-menu {
        padding-top: 0.75rem;
        height: 1.5625rem;
    }

    .footerLeft {
        width: 20%;
        margin-left: 7.5%;
    }

    .footerRight {
        top: -3.75rem;
        width: 30%;
        margin-right: 5%;
    }

    p.footerRight img, p.footerLeft img {
        max-width: 7.5rem;
    }

    .form-terms-of-use, .required-field {
        font-size: 1.125rem;
    }

    .terms-of-use-link {
        font-size: inherit;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    #bottom {
        width: 35rem;
        padding: 1.5rem 0;
    }

    .footerImages img:last-child {
        padding-right: 0.5rem;
    }

    .footerImages img {
        padding-left: 1.25rem;
    }

    .footerText {
        line-height: 1rem;
        margin-top: 0.5rem;
        width: 90%;
    }

    #footer-menu {
        padding-top: 0.625rem;
        height: 1.25rem;
    }

    .footerLeft {
        width: 30%;
        margin-left: 5%;
    }

    .footerRight {
        top: -3.75rem;
        width: 40%;
        margin-right: 5%;
    }

    p.footerRight img, p.footerLeft img {
        max-width: 6rem;
    }

    .form-terms-of-use, .required-field {
        font-size: 1rem;
    }

    .terms-of-use-link {
        font-size: inherit;
    }
}
/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .epi {
        font-size: 0.875rem; /* Smaller font size */
    }

    #content-wrapperS3e {
      /*  padding: 1.875rem 0;*/
    }

    .sidemenu {
        width: 12.5rem;
        padding: 0 0.3125rem 0.3125rem;
    }

    #sidemenu h2:last-of-type {
        padding-top: 1.875rem;
    }

    #personalSpaceForm, #parentsSpaceForm, #schoolSpaceForm, #sponsorSpaceForm {
        margin-bottom: 0.3125rem;
    }

    #sponsorSpaceForm {
        margin-right: 5.8125rem;
    }

    .space-menu {
        padding: 0.625rem 0.9375rem 0.9375rem;
    }

    #searchFormS3e .ui-inputfield {
        height: 1.25rem;
        width: 9.0625rem;
    }

    #courseForm .ui-inputfield {
        height: 1.25rem;
        padding: 0.5rem 0.25rem 0.3125rem;
    }

    .links {
        padding: 0.625rem 0.625rem 3.125rem;
        margin-right: 1.25rem;
        width: 10.3125rem;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    .epi {
        font-size: 0.75rem; /* Even smaller font size for mobile */
    }

    #content-wrapperS3e {
        /*padding: 1.5rem 0;*/
    }

    .sidemenu {
        width: 10rem;
        padding: 0 0.25rem 0.25rem;
    }

    #sidemenu h2:last-of-type {
        padding-top: 1.5rem;
    }

    #personalSpaceForm, #parentsSpaceForm, #schoolSpaceForm, #sponsorSpaceForm {
        margin-bottom: 0.3125rem;
    }

    #sponsorSpaceForm {
        margin-right: 3.75rem;
    }

    .space-menu {
        padding: 0.625rem 0.625rem 0.9375rem;
    }

    #searchFormS3e .ui-inputfield {
        height: 1.25rem;
        width: 7.5rem;
    }

    #courseForm .ui-inputfield {
        height: 1.25rem;
        padding: 0.5rem 0.25rem 0.3125rem;
    }

    .links {
        padding: 0.625rem 0.625rem 3.125rem;
        margin-right: 1.25rem;
        width: 8.75rem;
    }
    
    .trombine-col {
        margin-left:0px !important;
    }
}
/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .links ul li {
        padding-bottom: 0.375rem;
    }

    .links a {
        font-size: 1.3rem;
        padding: 0.3125rem 0;
    }

    .links img {
        padding-top: 0.625rem;
        width: 11.25rem;
        height: 3.125rem;
        transform: translate(-2.1875rem, 0);
    }

    #content-topS3e {
        /*min-height: 4.6875rem;*/
    }

    #content {
        min-height: 21.875rem;
    }

    .course-steps {
        margin-bottom: 0.625rem;
    }

    .course-steps ul li {
        padding: 0.9375rem;
        max-width: 6.25rem;
    }

    .home-content .text {
        margin-right: 0.625rem;
        width: 42.1875rem;
    }

    .home-content .text p:not(:first-of-type) {
        margin-top: 1.25rem;
    }

    #adminSpaceForm .announcements-table thead tr[role="row"] span:not(.ui-icon) {
        font-size: 0.875rem;
    }

    .announcements-table .content-column {
        font-size: 1.3rem;
    }

    .announcements-table .image-column {
        width: 6.25rem;
    }

    .announcements-table .image-column img {
        max-width: 4.6875rem;
        max-height: 4.6875rem;
        padding-left: 0.9375rem;
        padding-right: 0.625rem;
    }

    #adminSpaceForm .ui-datatable td.action-announcement {
        width: 3.75rem;
        height: 1.25rem;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    .links ul li {
        padding-bottom: 0.3125rem;
    }

    .links a {
        font-size: 1.2rem;
        padding: 0.3125rem 0;
    }

    .links img {
        padding-top: 0.625rem;
        width: 10rem;
        height: 2.5rem;
        transform: translate(-2.1875rem, 0);
    }

    #content-topS3e {
        /*min-height: 4.6875rem;*/
    }

    #content {
        min-height: 21.875rem;
    }

    .course-steps {
        margin-bottom: 0.625rem;
    }

    .course-steps ul li {
        padding: 0.75rem;
        max-width: 5rem;
    }

    .home-content .text {
        margin-right: 0.625rem;
        width: 100%;
    }

    .home-content .text p:not(:first-of-type) {
        margin-top: 1.25rem;
    }

    #adminSpaceForm .announcements-table thead tr[role="row"] span:not(.ui-icon) {
        font-size: 0.8125rem;
    }

    .announcements-table .content-column {
        font-size: 1.2rem;
    }

    .announcements-table .image-column {
        width: 5rem;
    }

    .announcements-table .image-column img {
        max-width: 3.75rem;
        max-height: 3.75rem;
        padding-left: 0.9375rem;
        padding-right: 0.625rem;
    }

    #adminSpaceForm .ui-datatable td.action-announcement {
        width: 3rem;
        height: 1.25rem;
    }
}
/* Tablet (min-width: 600px and max-width: 900px) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    #adminSpaceForm .ui-datatable td.action-announcement .action-link-delete,
    #adminSpaceForm .ui-datatable td.action-announcement .action-link-edit {
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 0.3125rem;
    }

    #adminSpaceForm label {
        margin-top: 1.25rem;
        font-size: 1rem;
    }

    .request-form label,
    .request-form .ui-widget label {
        font-size: 0.5625rem;
    }

    .request-form button {
        margin-top: 0.3125rem;
        margin-bottom: 0.3125rem;
    }

    .request-form p.date input {
        width: 12.25rem;
    }

    .course-detail.label:not(:first-child),
    .candidature-detail.label:not(:first-child) {
        margin-top: 1.25rem;
    }

    img.candidature-detail.content.logo {
        max-width: 12.5rem;
    }

    img.course-detail.content.logo {
        max-width: 6.25rem;
    }

    p.logo,
    p.funding {
        width: 21.875rem;
    }

    .fundingCol {
        width: 1.25rem;
    }

    p.attachment {
        width: 31.25rem;
    }

    p.logo-attachment {
        padding-left: 1.5rem;
    }
}

/* Mobile (max-width: 600px) */
@media only screen and (max-width: 37.5rem) {
    #adminSpaceForm .ui-datatable td.action-announcement .action-link-delete,
    #adminSpaceForm .ui-datatable td.action-announcement .action-link-edit {
        width: 1rem;
        height: 1rem;
        margin-left: 0.25rem;
    }

    #adminSpaceForm label {
        margin-top: 1rem;
        font-size: 0.875rem;
    }

    .request-form label,
    .request-form .ui-widget label {
        font-size: 1rem;
    }

    .request-form button {
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    .request-form p.date input {
        width: 11.25rem;
    }

    .course-detail.label:not(:first-child),
    .candidature-detail.label:not(:first-child) {
        margin-top: 1rem;
    }

    img.candidature-detail.content.logo {
        max-width: 10rem;
    }

    img.course-detail.content.logo {
        max-width: 5rem;
    }

    p.logo,
    p.funding {
        width: 18.75rem;
    }

    .fundingCol {
        width: 1rem;
    }

    p.attachment {
        width: 28.125rem;
    }

    p.logo-attachment {
        padding-left: 1.25rem;
    }
}

/* Tablet Media Query */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    #adminSpaceForm .request-form p.logo label,
    #adminSpaceForm p.logo label,
    .request-form p.logo label {
        font-size: 1.125rem; /* 1.2em converted to rem, assuming base font size is 16px */
        min-width: 21.625rem; /* 346px converted to rem */
    }

    .form-side .ui-fileupload {
        font-size: 0.875rem; /* 0.9em converted to rem */
    }

    .file-delete,
    .delete-funding-field,
    .add-funding-field {
        width: 1.9375rem; /* 31px converted to rem */
        height: 1.625rem; /* 26px converted to rem */
        margin-top: 1.875rem; /* 30px converted to rem */
    }
}

/* Mobile Media Query */
@media only screen and (max-width: 37.5rem) {
    #adminSpaceForm .request-form p.logo label,
    #adminSpaceForm p.logo label,
    .request-form p.logo label {
        font-size: 1rem; /* 1.2em converted to rem, assuming base font size is 16px */
        min-width: 21.625rem; /* 346px converted to rem */
    }

    .form-side .ui-fileupload {
        font-size: 0.75rem; /* 0.9em converted to rem */
    }

    .file-delete,
    .delete-funding-field,
    .add-funding-field {
        width: 1.9375rem; /* 31px converted to rem */
        height: 1.625rem; /* 26px converted to rem */
        margin-top: 1.875rem; /* 30px converted to rem */
    }
}



/* Tablet Screen (max-width: 48rem) */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .links ul li:before {
        content: "• ";
    }

    .links ul li {
        padding-bottom: 0.375rem;
    }

    .links a {
        line-height: 1.5em;
        padding: 0.3125rem 0;
        font-size: 1.3em;
        color: rgb(70, 70, 70);
        text-decoration: underline;
    }

    .links img {
        padding-top: 0.625rem;
        width: 11.25rem;
        height: 3.125rem;
        transform: translate(-2.1875rem, 0);
    }

    .w700 {
        /*width: 700px;*/
    }

    #content-topS3e {
        /*min-height: 4.6875rem;*/
    }

    #content {
        background-color: #fff;
        min-height: 21.875rem;
        margin-top: 0;
    }

    .course-steps {
        border-top: 0.3125rem solid #D7215F;
        margin-bottom: 0.625rem;
        text-align: center;
        background-color: rgb(237, 237, 237);
        color: rgb(147, 147, 147);
    }

    .course-steps ul li {
        padding: 0.9375rem;
        max-width: 6.25rem;
        vertical-align: middle;
    }

    .course-steps .smaller {
        text-transform: none;
    }

    .home-content .text {
        text-align: justify;
        margin-right: 0.625rem;
        width: 42.1875rem;
    }

    .home-content .text p:not(:first-of-type) {
        margin-top: 1.25rem;
    }

    #adminSpaceForm .announcements-table thead tr[role="row"] span:not(.ui-icon){
        font-size: 14pt;
        text-align: center;
    }

    .announcements-table .content-column {
        font-family: Roboto, sans-serif;
        font-size: 1.3em;
    }

    .announcements-table .image-column {
        text-align: center;
        vertical-align: middle;
        width: 6.25rem;
    }

    .announcements-table .image-column img {
        max-width: 4.6875rem;
        max-height: 4.6875rem;
        padding-left: 0.9375rem;
        padding-right: 0.625rem;
    }

    #adminSpaceForm .ui-datatable td.action-announcement {
        width: 3.75rem;
        height: 1.25rem;
        text-align: center;
        vertical-align: middle;
    }
}

/* Mobile Screen (max-width: 480px) */
@media only screen and (max-width: 37.5rem) {
    .links ul li:before {
        content: "• ";
    }

    .links ul li {
        padding-bottom: 0.375rem;
    }

    .links a {
        line-height: 1.5em;
        padding: 0.3125rem 0;
        font-size: 1.3em;
        color: rgb(70, 70, 70);
        text-decoration: underline;
    }

    .links img {
        padding-top: 0.625rem;
        width: 11.25rem;
        height: 3.125rem;
        transform: translate(-2.1875rem, 0);
    }

    .w700 {
        /*width: 700px;*/
    }

    #content-topS3e {
        /*min-height: 4.6875rem;*/
    }

    #content {
        background-color: #fff;
        min-height: 21.875rem;
        margin-top: 0;
    }

    .course-steps {
        border-top: 0.3125rem solid #D7215F;
        margin-bottom: 0.625rem;
        text-align: center;
        background-color: rgb(237, 237, 237);
        color: rgb(147, 147, 147);
    }

    .course-steps ul li {
        padding: 0.9375rem;
        max-width: 6.25rem;
        vertical-align: middle;
    }

    .course-steps .smaller {
        text-transform: none;
    }

    .home-content .text {
        text-align: justify;
        margin-right: 0.625rem;
        width: 42.1875rem;
    }

    .home-content .text p:not(:first-of-type) {
        margin-top: 1.25rem;
    }

    #adminSpaceForm .announcements-table thead tr[role="row"] span:not(.ui-icon){
        font-size: 14pt;
        text-align: center;
    }

    .announcements-table .content-column {
        font-family: Roboto, sans-serif;
        font-size: 1.3em;
    }

    .announcements-table .image-column {
        text-align: center;
        vertical-align: middle;
        width: 6.25rem;
    }

    .announcements-table .image-column img {
        max-width: 4.6875rem;
        max-height: 4.6875rem;
        padding-left: 0.9375rem;
        padding-right: 0.625rem;
    }

    #adminSpaceForm .ui-datatable td.action-announcement {
        width: 3.75rem;
        height: 1.25rem;
        text-align: center;
        vertical-align: middle;
    }
}




/* Tablet Media Query */
@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .form-side.form-bottom {
        width: 100%;
        margin-top: 2rem;
        margin-right: 0.1875rem;
        float: right;
    }

    .form-terms-of-use, .required-field {
        width: 100%;
        margin-top: 1.875rem;
        margin-left: 0.125rem;
        float: right;
    }

    .form-bottom {
        width: 53.75rem;
        margin-top: 1.25rem;
        margin-right: 0.625rem;
        float: right;
    }

    .form-bottom-sponsor {
        display: inline-block;
    }

    .required-field {
        font-family: Roboto, sans-serif;
        font-size: 1.125rem;
        width: 100%;
        margin-top: 1.875rem;
        margin-left: 0.125rem;
        float: right;
    }

    .ui-editor.ui-widget-content {
        width: 26.5625rem !important;
    }

    .request-form input,
    .request-form textarea {
        margin: 0.3125rem 0;
        width: 26.0625rem;
    }

    .request-form select {
        width: 26.6875rem;
    }

    #adminSpaceForm.request-form  select {
        width: 12.5rem;
        margin-left: 1.25rem;
    }

    .form-left {
        float: left;
    }

    .form-right {
        float: right;
    }

    .form-vertical-align {
        margin-top: 2.625rem;
    }

    .ui-corner-all {
        border-radius: 0;
    }

    input::-webkit-input-placeholder {
        color: #999;
    }
    input:-moz-placeholder {
        color: #999;
    }
    input:-ms-input-placeholder {
        color: #999;
    }

    textarea::-webkit-input-placeholder {
        color: #999;
    }
    textarea:-moz-placeholder {
        color: #999;
    }
    textarea:-ms-input-placeholder {
        color: #999;
    }

    .form-side h2 {
        text-transform: uppercase;
        font-family: Roboto, sans-serif;
        font-size: 1.0625rem;
        font-weight: 100;
    }

    .form-img {
        float: left;
        margin-right: 0.625rem;
    }

    .form-title:not(:first-of-type) {
        margin-top: 1.875rem;
    }

    .request-form .form-option label {
        margin-top: 0.625rem;
        font-size: 0.75rem;
    }

    #companyType {
        width: 9.6875rem;
    }

    #optionActionCompany {
        margin-bottom: 3.125rem;
    }

    .contact-gender label,
    #createOrSelectCompany label {
        color: #0047a3;
    }

    .request-form .company-siret,
    .request-form .contact-lastname,
    #lastnameReferent,
    .request-form .lastname-referent {
        width: 12.4375rem;
        margin-right: 0.625rem;
    }

    .request-form .company-naf,
    .request-form .contact-firstname,
    #firstnameReferent,
    .request-form .firstname-referent {
        width: 12.375rem;
    }

    .request-form .company-zipcode {
        width: 5rem;
        margin-right: 0.625rem;
    }

    .request-form .company-city {
        width: 19.8125rem;
    }

    #companyPhonenumber {
        width: 6.125rem;
    }

    .request-form .candidature-delay {
        width: 5.625rem;
    }

    .form-img-tel {
        margin-right: 0.4375rem;
    }

    .form-img-googlemap {
        float: right;
        margin-right: 8.75rem;
    }

    .label-name-contact {
        width: 13.75rem;
    }

    .label-fname-contact {
        width: 12.5rem;
    }

    .request-form p.date label {
        width: 13.125rem;
    }

    p.date {
        display: inline-block;
        width: 13.125rem;
    }

    .request-form .period-table.ui-datatable-scrollable .ui-datatable-scrollable-header table,
    .request-form .period-table.ui-datatable-scrollable .ui-datatable-scrollable-body table,
    .request-form .period-table.ui-datatable-scrollable .ui-datatable-scrollable-footer table {
        width: 100%;
    }

    .request-form .period-table .ui-datatable-scrollable-body > table > tbody > tr > td > div.ui-dt-c {
        padding: 0.125rem 0.3125rem;
    }

    .hide-column-names table thead tr {
        display: none;
    }

    .period-detail .ui-spinner {
        margin: 0.3125rem 1.25rem 0 0;
        vertical-align: top;
    }

    .period-detail input.ui-spinner-input {
        width: 4.375rem;
        margin: 0;
        padding-right: 1.5rem;
    }

    .request-form .period-table input.ui-spinner-input {
        width: 1.875rem;
        margin: 0;
    }

    .request-form .period-detail-panel {
        width: 34.375rem;
        height: 15.625rem;
        overflow-y: scroll;
    }

    .request-form .period-detail-panel label {
        margin-bottom: 0.9375rem;
        margin-top: 1.25rem;
        font-family: Roboto, sans-serif;
        font-size: 1rem;
        display: inline-block;
    }

    a.ui-spinner-button {
        height: 46%;
    }

    #searchFormS3e.search-box > a.ui-commandlink {
        background-image: url("../../resources/images/s3e/btn-recherche.png");
        background-size: 100% 100%;
        float: left;
        height: 1.875rem;
        width: 1.875rem;
    }

    #searchFormS3e.search-box > a.ui-commandlink:hover {
        background-image: url("../../resources/images/s3e/btn-recherche-hover.png");
        background-size: 100% 100%;
        float: left;
        height: 1.875rem;
        width: 1.875rem;
    }

    .ui-dialog .action-buttons > button,
    .action-buttons > button,
    .action-buttons > button.ui-state-default {
        color: #ffffff;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 0.875rem !important;
        text-transform: uppercase;
        min-width: 8.75rem;
        box-shadow: none;
        text-shadow: none;
    }

    .action-buttons {
        margin: 1.25rem 0;
    }

    .action-buttons button:first-of-type {
        float: left;
    }

    .action-buttons button:not(:first-of-type) {
        /*float: right;*/
    }

    .action-buttons button:not(:last-of-type) {
        margin-right: 1.875rem;
    }

    .action-buttons > button > span.ui-button-text {
        /*border: white solid 3px;*/
        padding: 0 1.25rem;
    }

    .sponsor-content .action-buttons > button,
    .action-buttons.sponsor-ab-color > button,
    .action-buttons.company-ab-color > button,
    .home-content #home-form .action-buttons > button:last-of-type { /*.action-buttons.purple */
        /*border: #90419a solid 1px;*/
        background: #0047a3;
        min-width: 11.5625rem;
        white-space: pre;
        background-image: url(../../resources/images/s3e/icon_home2.png);
        background-repeat: no-repeat;
        background-size: 20%;
        background-position: 90px 90px;
    }

    .sponsor-space .action-buttons > button.ui-state-hover,
    .action-buttons.sponsor-ab-color > button.ui-state-hover,
    .action-buttons.company-ab-color > button.ui-state-hover,
    .home-content #home-form .action-buttons > button:last-of-type.ui-state-hover { /*.action-buttons.purple */
        border: #0047a3 solid 3px;
        background: #ffffff;
        color: #0047a3;
        background-image: url(../../resources/images/s3e/icon_home2.png);
        background-repeat: no-repeat;
        background-size: 20%;
        background-position: 90px 90px;
    }

    .sponsor-content .action-buttons > button.ui-state-hover > .ui-button-text,
    .action-buttons.sponsor-ab-color > button.ui-state-hover > .ui-button-text,
    .action-buttons.company-ab-color > button.ui-state-hover > .ui-button-text,
    .home-content #home-form .action-buttons > button:last-of-type.ui-state-hover > .ui-button-text { /*.action-buttons.purple */
        /*border: #ea5425 solid 3px;*/
    }

    .students-space .action-buttons > button,
    .home-content #home-form .action-buttons > button:first-of-type,
    .action-buttons.orange > button,
    .action-buttons > button:first-of-type { /*.action-buttons.orange */
        background: #f39834;
        min-width: 11.5625rem;
    }

    .students-space .action-buttons > button.ui-state-hover,
    .home-content #home-form .action-buttons > button:first-of-type.ui-state-hover,
    .action-buttons.orange > button.ui-state-hover,
    .action-buttons > button:first-of-type.ui-state-hover { /*.action-buttons.orange */
        border: #f39834 solid 3px;
        background: #ffffff;
        color: #f39834;
    }

    .p-fluid label {
        float: left;
        padding: 0 1.25rem 0 0;
        text-align: right;
    }
}

/* Mobile Media Query */
@media only screen and (max-width: 37.5rem) {
    .form-side.form-bottom {
        width: 100%;
        margin-top: 1.25rem;
        margin-right: 0.1875rem;
        float: right;
    }

    .form-terms-of-use, .required-field {
        width: 100%;
        margin-top: 1.25rem;
        margin-left: 0.125rem;
        float: right;
    }

    .form-bottom {
        width: 50.625rem;
        margin-top: 1.25rem;
        margin-right: 0.625rem;
        float: right;
    }

    .form-bottom-sponsor {
        display: inline-block;
    }

    .required-field {
        font-family: Roboto, sans-serif;
        font-size: 1rem;
        width: 100%;
        margin-top: 1.25rem;
        margin-left: 0.125rem;
        float: right;
    }

    .ui-editor.ui-widget-content {
        width: 26.5625rem !important;
    }

    .request-form input,
    .request-form textarea {
        margin: 0.3125rem 0;
        width: 26.0625rem;
    }

    .request-form select {
        width: 26.6875rem;
    }

    #adminSpaceForm.request-form  select {
        width: 12.5rem;
        margin-left: 1.25rem;
    }

    .form-left {
        float: left;
    }

    .form-right {
        float: right;
    }

    .form-vertical-align {
        margin-top: 2.625rem;
    }

    .ui-corner-all {
        border-radius: 0;
    }

    input::-webkit-input-placeholder {
        color: #999;
    }
    input:-moz-placeholder {
        color: #999;
    }
    input:-ms-input-placeholder {
        color: #999;
    }

    textarea::-webkit-input-placeholder {
        color: #999;
    }
    textarea:-moz-placeholder {
        color: #999;
    }
    textarea:-ms-input-placeholder {
        color: #999;
    }

    .form-side h2 {
        text-transform: uppercase;
        font-family: Roboto, sans-serif;
        font-size: 1rem;
        font-weight: 100;
    }

    .form-img {
        float: left;
        margin-right: 0.625rem;
    }

    .form-title:not(:first-of-type) {
        margin-top: 1.25rem;
    }

    .request-form .form-option label {
        margin-top: 0.625rem;
        font-size: 0.75rem;
    }

    #companyType {
        width: 9.6875rem;
    }

    #optionActionCompany {
        margin-bottom: 3.125rem;
    }

    .contact-gender label,
    #createOrSelectCompany label {
        color: #0047a3;
    }

    .request-form .company-siret,
    .request-form .contact-lastname,
    #lastnameReferent,
    .request-form .lastname-referent {
        width: 12.4375rem;
        margin-right: 0.625rem;
    }

    .request-form .company-zipcode {
        width: 5rem;
        margin-right: 0.625rem;
    }

    .request-form .company-city {
        width: 19.8125rem;
    }

    #companyPhonenumber {
        width: 6.125rem;
    }

    .request-form .candidature-delay {
        width: 5.625rem;
    }

    .form-img-tel {
        margin-right: 0.4375rem;
    }

    .form-img-googlemap {
        float: right;
        margin-right: 8.75rem;
    }

    .label-name-contact {
        width: 13.75rem;
    }

    .label-fname-contact {
        width: 12.5rem;
    }

    .request-form p.date label {
        width: 13.125rem;
    }

    p.date {
        display: inline-block;
        width: 13.125rem;
    }

    .request-form .period-table.ui-datatable-scrollable .ui-datatable-scrollable-header table,
    .request-form .period-table.ui-datatable-scrollable .ui-datatable-scrollable-body table,
    .request-form .period-table.ui-datatable-scrollable .ui-datatable-scrollable-footer table {
        width: 100%;
    }

    .request-form .period-table .ui-datatable-scrollable-body > table > tbody > tr > td > div.ui-dt-c {
        padding: 0.125rem 0.3125rem;
    }

    .hide-column-names table thead tr {
        display: none;
    }

    .period-detail .ui-spinner {
        margin: 0.3125rem 1.25rem 0 0;
        vertical-align: top;
    }

    .period-detail input.ui-spinner-input {
        width: 4.375rem;
        margin: 0;
        padding-right: 1.5rem;
    }

    .request-form .period-table input.ui-spinner-input {
        width: 1.875rem;
        margin: 0;
    }

    .request-form .period-detail-panel {
        width: 34.375rem;
        height: 15.625rem;
        overflow-y: scroll;
    }

    .request-form .period-detail-panel label {
        margin-bottom: 0.9375rem;
        margin-top: 1.25rem;
        font-family: Roboto, sans-serif;
        font-size: 1rem;
        display: inline-block;
    }

    a.ui-spinner-button {
        height: 46%;
    }

    #searchFormS3e.search-box > a.ui-commandlink {
        background-image: url("../../resources/images/s3e/btn-recherche.png");
        background-size: 100% 100%;
        float: left;
        height: 1.875rem;
        width: 1.875rem;
    }

    #searchFormS3e.search-box > a.ui-commandlink:hover {
        background-image: url("../../resources/images/s3e/btn-recherche-hover.png");
        background-size: 100% 100%;
        float: left;
        height: 1.875rem;
        width: 1.875rem;
    }

    .ui-dialog .action-buttons > button,
    .action-buttons > button,
    .action-buttons > button.ui-state-default {
        color: #ffffff;
        font-family: Roboto, sans-serif;
        font-weight: 100;
        font-size: 0.75rem !important;
        text-transform: uppercase;
        min-width: 8.75rem;
        box-shadow: none;
        text-shadow: none;
    }

    .action-buttons {
        margin: 1.25rem 0;
    }

    .action-buttons button:first-of-type {
        float: left;
    }

    .action-buttons button:not(:first-of-type) {
        /*float: right;*/
    }

    .action-buttons button:not(:last-of-type) {
        margin-right: 1.25rem;
    }

    .action-buttons > button > span.ui-button-text {
        /*border: white solid 3px;*/
        padding: 0 1.25rem;
    }

    .sponsor-content .action-buttons > button,
    .action-buttons.sponsor-ab-color > button,
    .action-buttons.company-ab-color > button,
    .home-content #home-form .action-buttons > button:last-of-type { /*.action-buttons.purple */
        /*border: #90419a solid 1px;*/
        background: #0047a3;
        min-width: 11.5625rem;
        white-space: pre;
        background-image: url(../../resources/images/s3e/icon_home2.png);
        background-repeat: no-repeat;
        background-size: 20%;
        background-position: 90px 90px;
    }

    .sponsor-space .action-buttons > button.ui-state-hover,
    .action-buttons.sponsor-ab-color > button.ui-state-hover,
    .action-buttons.company-ab-color > button.ui-state-hover,
    .home-content #home-form .action-buttons > button:last-of-type.ui-state-hover { /*.action-buttons.purple */
        border: #0047a3 solid 3px;
        background: #ffffff;
        color: #0047a3;
        background-image: url(../../resources/images/s3e/icon_home2.png);
        background-repeat: no-repeat;
        background-size: 20%;
        background-position: 90px 90px;
    }

    .sponsor-content .action-buttons > button.ui-state-hover > .ui-button-text,
    .action-buttons.sponsor-ab-color > button.ui-state-hover > .ui-button-text,
    .action-buttons.company-ab-color > button.ui-state-hover > .ui-button-text,
    .home-content #home-form .action-buttons > button:last-of-type.ui-state-hover > .ui-button-text { /*.action-buttons.purple */
        /*border: #ea5425 solid 3px;*/
    }

    .students-space .action-buttons > button,
    .home-content #home-form .action-buttons > button:first-of-type,
    .action-buttons.orange > button,
    .action-buttons > button:first-of-type { /*.action-buttons.orange */
        background: #f39834;
        min-width: 11.5625rem;
    }

    .students-space .action-buttons > button.ui-state-hover,
    .home-content #home-form .action-buttons > button:first-of-type.ui-state-hover,
    .action-buttons.orange > button.ui-state-hover,
    .action-buttons > button:first-of-type.ui-state-hover { /*.action-buttons.orange */
        border: #f39834 solid 3px;
        background: #ffffff;
        color: #f39834;
    }

    .p-fluid label {
        float: left;
        padding: 0 1.25rem 0 0;
        text-align: right;
    }
}


@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .custom-select select,
    #courseDataTable thead tr[role="row"] .course-status > select,
    #courseDataTable thead tr[role="row"] .course-prof-cat > select {
        font-size: 0.875rem; /* 14pt */
    }

    #city,
    #district,
    #school {
        width: 26.0625rem; /* 417px */
    }

    #email {
        margin-top: 0.9375rem; /* 15px */
    }

    .request-form .referent-email {
        margin-right: 0.3125rem; /* 5px */
        width: 19.0625rem; /* 305px */
    }

    #district {
        margin-left: 0.4375rem; /* 7px */
    }

    .custom-select:after,
    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        padding: 0 0.4375rem; /* 7px */
        font-size: 0.6rem; /* 60% of 1rem (16px) */
    }

    .custom-select.course-select.status-select,
    .custom-select.candidature-select.status-select {
        margin-top: 0.3125rem; /* 5px */
    }

    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        bottom: 0.4375rem; /* 7px */
        line-height: 1.5625rem; /* 25px */
        right: 1.5625rem; /* 25px */
    }

    .ui-datalist-content.ui-widget-content {
        border: none;
    }

    .ui-datalist .ui-paginator-bottom {
        margin-bottom: 1.25rem; /* 20px */
    }

    .list-box-c {
        margin-bottom: 0.625rem; /* 10px */
    }

    .list-item > .left .course-title,
    .list-item > .left .company-name {
        font-size: 0.75rem; /* 12pt */
    }
}

@media only screen and (max-width: 37.5rem) {
    .custom-select select,
    #courseDataTable thead tr[role="row"] .course-status > select,
    #courseDataTable thead tr[role="row"] .course-prof-cat > select {
        font-size: 0.875rem; /* 14pt */
    }

    #city,
    #district,
    #school {
        width: 26.0625rem; /* 417px */
    }

    #email {
        margin-top: 0.9375rem; /* 15px */
    }

    .request-form .referent-email {
        margin-right: 0.3125rem; /* 5px */
        width: 19.0625rem; /* 305px */
    }

    #district {
        margin-left: 0.4375rem; /* 7px */
    }

    .custom-select:after,
    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        padding: 0 0.4375rem; /* 7px */
        font-size: 0.6rem; /* 60% of 1rem (16px) */
    }

    .custom-select.course-select.status-select,
    .custom-select.candidature-select.status-select {
        margin-top: 0.3125rem; /* 5px */
    }

    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        bottom: 0.4375rem; /* 7px */
        line-height: 1.5625rem; /* 25px */
        right: 1.5625rem; /* 25px */
    }

    .ui-datalist-content.ui-widget-content {
        border: none;
    }

    .ui-datalist .ui-paginator-bottom {
        margin-bottom: 1.25rem; /* 20px */
    }

    .list-box-c {
        margin-bottom: 0.625rem; /* 10px */
    }

    .list-item > .left .course-title,
    .list-item > .left .company-name {
        font-size: 0.75rem; /* 12pt */
    }
}


@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    .custom-select select,
    #courseDataTable thead tr[role="row"] .course-status > select,
    #courseDataTable thead tr[role="row"] .course-prof-cat > select {
        font-size: 0.875rem; /* 14pt */
    }

    #city,
    #district,
    #school {
        width: 26.0625rem; /* 417px */
    }

    #email {
        margin-top: 0.9375rem; /* 15px */
    }

    .request-form .referent-email {
        margin-right: 0.3125rem; /* 5px */
        width: 19.0625rem; /* 305px */
    }

    #district {
        margin-left: 0.4375rem; /* 7px */
    }

    .custom-select:after,
    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        padding: 0 0.4375rem; /* 7px */
        font-size: 0.6rem; /* 60% of 1rem (16px) */
    }

    .custom-select.course-select.status-select,
    .custom-select.candidature-select.status-select {
        margin-top: 0.3125rem; /* 5px */
    }

    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        bottom: 0.4375rem; /* 7px */
        line-height: 1.5625rem; /* 25px */
        right: 1.5625rem; /* 25px */
    }

    .ui-datalist-content.ui-widget-content {
        border: none;
    }

    .ui-datalist .ui-paginator-bottom {
        margin-bottom: 1.25rem; /* 20px */
    }

    .list-box-c {
        margin-bottom: 0.625rem; /* 10px */
    }

    .list-item > .left .course-title,
    .list-item > .left .company-name {
        font-size: 0.75rem; /* 12pt */
    }

    .list-item > .left .company-city {
        margin-top: 0.1875rem; /* 3px */
        font-size: 0.5625rem; /* 9pt */
        font-style: italic;
    }

    .ui-datalist-content > .list-item > .right {
        font-size: 0.6875rem; /* 11pt */
    }

    .ui-datalist-content > .list-item > .left span:first-of-type {
        margin-top: 0.3125rem; /* 5px */
        font-size: 0.75rem; /* 12pt */
        font-weight: 600;
    }

    .ui-datalist-content > .list-item > .left span:not(:first-of-type) {
        margin-top: 0.1875rem; /* 3px */
        font-size: 0.5625rem; /* 9pt */
        font-style: italic;
    }

    .list-header > span {
        font-size: 1rem; /* 16pt */
    }

    .ui-datalist-content > .list-item > .left,
    .list-header > span.left {
        padding-left: 0.9375rem; /* 15px */
        width: 25.6875rem; /* 550px */
    }

    .course-filter {
        margin: 0 1.25rem 0.625rem 1.25rem; /* 20px 10px */
    }

    .course-filter > .left {
        padding-left: 0.9375rem; /* 15px */
    }

    .floating-box .leftL {
        float: left;
    }

    #candidatures-referent .ui-datalist-content > .list-item > .left,
    #company-courses .ui-datalist-content > .list-item > .left,
    #plateform-courses .ui-datalist-content > .list-item > .left,
    .list-header.referent > span.left,
    .company-courses-header .list-header.company > span.left,
    .plateform-courses-header .list-header.plateform > span.left {
        width: 25rem; /* 400px */
    }

    #candidatures-referent .ui-datalist-content > .list-item > .centerL,
    #company-courses .ui-datalist-content > .list-item > .centerL,
    #plateform-courses .ui-datalist-content > .list-item > .centerL,
    .list-header.referent > span.centerL,
    .company-courses-header .list-header.company > span.centerL,
    .plateform-courses-header .list-header.plateform > span.centerL {
        width: 9.375rem; /* 150px */
        float: left;
        text-align: center;
    }

    .list-header > span.center {
        width: 9.375rem; /* 150px */
        float: left;
        text-align: center;
    }

    .ui-datalist-content > .list-item > .center {
        width: 9.375rem; /* 150px */
        float: left;
        height: 2.3125rem; /* 37px */
        text-align: center;
    }

    .ui-datalist-content > .list-item > .right,
    .list-header > span.right {
        padding-right: 0.9375rem; /* 15px */
    }
}


@media only screen and (max-width: 37.5rem) {
    .custom-select select,
    #courseDataTable thead tr[role="row"] .course-status > select,
    #courseDataTable thead tr[role="row"] .course-prof-cat > select {
        font-size: 0.875rem; /* 14pt */
    }

    #city,
    #district,
    #school {
        width: 26.0625rem; /* 417px */
    }

    #email {
        margin-top: 0.9375rem; /* 15px */
    }

    .request-form .referent-email {
        margin-right: 0.3125rem; /* 5px */
        width: 19.0625rem; /* 305px */
    }

    #district {
        margin-left: 0.4375rem; /* 7px */
    }

    .custom-select:after,
    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        padding: 0 0.4375rem; /* 7px */
        font-size: 0.6rem; /* 60% of 1rem (16px) */
    }

    .custom-select.course-select.status-select,
    .custom-select.candidature-select.status-select {
        margin-top: 0.3125rem; /* 5px */
    }

    #courseDataTable thead tr[role="row"] .course-status > .ui-dt-c:after {
        bottom: 0.4375rem; /* 7px */
        line-height: 1.5625rem; /* 25px */
        right: 1.5625rem; /* 25px */
    }

    .ui-datalist-content.ui-widget-content {
        border: none;
    }

    .ui-datalist .ui-paginator-bottom {
        margin-bottom: 1.25rem; /* 20px */
    }

    .list-box-c {
        margin-bottom: 0.625rem; /* 10px */
    }

    .list-item > .left .course-title,
    .list-item > .left .company-name {
        font-size: 0.75rem; /* 12pt */
    }

    .list-item > .left .company-city {
        margin-top: 0.1875rem; /* 3px */
        font-size: 0.5625rem; /* 9pt */
        font-style: italic;
    }

    .ui-datalist-content > .list-item > .right {
        font-size: 0.6875rem; /* 11pt */
    }

    .ui-datalist-content > .list-item > .left span:first-of-type {
        margin-top: 0.3125rem; /* 5px */
        font-size: 0.75rem; /* 12pt */
        font-weight: 600;
    }

    .ui-datalist-content > .list-item > .left span:not(:first-of-type) {
        margin-top: 0.1875rem; /* 3px */
        font-size: 0.5625rem; /* 9pt */
        font-style: italic;
    }

    .list-header > span {
        font-size: 1rem; /* 16pt */
    }

    .ui-datalist-content > .list-item > .left,
    .list-header > span.left {
        padding-left: 0.9375rem; /* 15px */
        width: 25.6875rem; /* 550px */
    }

    .course-filter {
        margin: 0 1.25rem 0.625rem 1.25rem; /* 20px 10px */
    }

    .course-filter > .left {
        padding-left: 0.9375rem; /* 15px */
    }

    .floating-box .leftL {
        float: left;
    }

    #candidatures-referent .ui-datalist-content > .list-item > .left,
    #company-courses .ui-datalist-content > .list-item > .left,
    #plateform-courses .ui-datalist-content > .list-item > .left,
    .list-header.referent > span.left,
    .company-courses-header .list-header.company > span.left,
    .plateform-courses-header .list-header.plateform > span.left {
        width: 25rem; /* 400px */
    }

    #candidatures-referent .ui-datalist-content > .list-item > .centerL,
    #company-courses .ui-datalist-content > .list-item > .centerL,
    #plateform-courses .ui-datalist-content > .list-item > .centerL,
    .list-header.referent > span.centerL,
    .company-courses-header .list-header.company > span.centerL,
    .plateform-courses-header .list-header.plateform > span.centerL {
        width: 9.375rem; /* 150px */
        float: left;
        text-align: center;
    }

    .list-header > span.center {
        width: 9.375rem; /* 150px */
        float: left;
        text-align: center;
    }

    .ui-datalist-content > .list-item > .center {
        width: 9.375rem; /* 150px */
        float: left;
        height: 2.3125rem; /* 37px */
        text-align: center;
    }

    .ui-datalist-content > .list-item > .right,
    .list-header > span.right {
        padding-right: 0.9375rem; /* 15px */
    }
}







/*#topS3e.header {
    width: 100%;
    height: 10.2rem;
    margin: 0;
    background-color: #fff;
    background-image: url(../../resources/images/s3e/background-chateau.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}*/

.flex {
    display: flex;
    flex-wrap: wrap;
}

.form-side {
    width: 50%;
    box-sizing: border-box;
}

/*.form-side-l55 {
    width: 55%;
    box-sizing: border-box;
}

.form-side-r40 {
    width: 40%;
    box-sizing: border-box;
}*/


.form-right {
    margin-left: auto;
}

@media screen and (max-width: 48rem) {
    .form-side{
        width: 90%; /* Full width on small screens */
        margin-left: 5%;
        margin-right:5%;
    }
}


/* Default styles for Desktop */
.div1 {
  width: 40% !important;
}

.div2 {
  width: 60%;
}

.div22 {
  flex:auto;
}

.div1_show {
  width: 28%;
}

.div2_show {
  width: 66%;
}

@media (max-width: 64rem) {
  .div1_show , .div2_show,.column-1,.column-2 {
    width: 100%;
  }
}


@media (max-width: 48rem) {
  .div1_show , .div2_show,.column-1,.column-2 {
    width: 100% !important;
  }
}

@media (max-width: 48rem) {
  .div1, .div2 {
    width: 50%;
  }
}


@media (max-width: 480px) {
  .div1, .div2  {
    width: 100%;
  }
}

    .icon-text {
        display: flex; /* Align items side by side */
        align-items: center; /* Vertically center items */
    }

    .icon-text i {
        font-size: 1.5em;
    }

    .icon-text h5 {
        margin-left: 10px; /* Space between icon and text */
        margin-bottom: 0; /* Remove default margin */
        font-size: 1.2em; /* Adjust text size */
    }
    
@media (max-width: 48rem) {
    .icon-text h5 {
        padding-top: 0;
        padding-bottom: 0;
    }
}

.og-color{
    
   color: #2659B5;
}

.bg-og-color{
    background-color:#2659B5 !important; 
}

.custom-fieldset legend {
    background: #2659B5 !important;
    color: white !important;
    padding: 5px;
    border-radius: 4px;
}

.custom-fieldset .ui-panel-titlebar {
    background: #2659B5 !important;
    color: white !important;
    padding: 5px;
    border-radius: 4px;
}

    
    .logo3 {
        position: relative;
   
        /*padding: 5px; Add some padding around the logo */
    }
    
    .logo3 img {
        max-width: 10rem;
        /*margin-bottom:1rem;*/
        /*box-shadow: 0 1px 4px lightgray;*/
        /*margin-right: 1rem;*/
        object-fit:contain;
    }
    
    .flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.column-1 {
  flex: 2 1 50% !important;
  margin-right:3rem;
}

.column-2 {
  flex: 1 1 14%;
}

/* Responsive adjustments */
@media (max-width: 48rem) {
  .column-1,
  .column-2 {
    flex: 0 0 fit-content; /* 100% width for smaller screens */
    margin-left:0px !important; 
    margin-right:0px !important;
  }
 .home_screen_panel{    
  height: auto;
} 
  
}

.home_screen_panel{    
  max-height: 70vmin;
}

/*********************************do not touch***************************************************/



.logoimg {
    width: 4.6875rem; 
    height: 3.125rem;
    float: left;
    margin-top: 0.625rem;
    margin-left: 2.5rem;
}

img#centered_header_logo{
    width: auto;
    margin-top: 1.2rem;
    height: 6rem;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    text-align: center;
}

body .alignthatleft{
    display: block;
    position: absolute;
    top: 0rem;
    left: 1rem;
    /*height: 3.25rem;*/
    height:5rem;
    width: auto;
    border-radius:4px;
}

.leftalignheader {
    float: left;
}

.rightalignheader {
    float: right;
    background-color: #e7eaf2;
    border-radius: 0.25rem;
    line-height: 2.188rem;
    text-align: center !important;
    padding-right: 0.625rem;
    padding-left: 0.625rem;
    margin-top: 1.125rem; 
    margin-right: 2.5rem; 
}

#user-button-header{
    background: none;
    padding-right: 0px;
    margin-right: 0px;
    color: white;
}

#top-menubuttonS3e_menu {
    border: none;
    background: lightgray;
}

#top-menubuttonS3e_menu a {
    color: white;
    font-size: 1em;
    font-family: RobotoRegular, sans-serif;
}

#top-menubuttonS3e_menu .ui-state-hover {
    background: #ea5425;
    box-shadow: none;
}


#topS3e .top-username {
    font-size: 1.125rem;
}

#topS3e .top-username button {
    font: inherit;
    background: none !important;
    color: inherit;
    text-shadow: inherit;
    border: none;
    box-shadow: none;
    height: 2.375rem;
}

#topS3e .top-username .ui-button .ui-button-text {
    display: initial;
    text-decoration: underline;
    color:black;
}

#topS3e .top-username button.ui-state-focus,
#topS3e .top-username button.ui-state-hover {
    outline: none;
}

body .DesktopMenu{
        display: block !important;
}
    
 .Menu-Mobile-box span[rendered="false"]{
    display: none;
}

.Menu-Mobile-box span[rendered="true"] *:before{
    margin-right: 0px !important;
}

#bienvenue-ode-img-mobile,.other-image{
    height: 2.5rem !important;
    display: block;
    margin: auto;
    cursor: pointer;
    pointer-events: all;
/*    pointer-events: none !important;*/
}

body img.other-image{
    margin-left: 3px !important;
    height: 2.222rem !important;
}

.newcourse-fg-color {
    color: #0047a3 !important;
}

h1{
    font-size: 1.8em;
    padding-bottom: 10px;
    font-family: Roboto, sans-serif;
    font-weight: 500;
}

.expired {
    color: #707070;
    font-size: 13pt;
}

.home-fg-color, 
#content-topS3e .home-fg-color{
    color: #1b50b1;
}

body .ui-button .ui-icon-triangle-1-s:before {
    content: "";
}

    .product-item .product-item-content {
        border: 2px solid var(--surface-d);
        border-radius: 3px;
        margin: .3rem;
        text-align: center;
        padding: 2rem 0;
    }

    .product-item .product-image {
        width: 50%;
        height: 10rem;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
    }
    
/*    .carousel-button2{
    font-weight: 600 !important;
    border-radius: .83rem/50%;
    color: white;
    display: inline-block;
    line-height: unset !important;
    padding: .38rem .52rem !important;
    text-align: center;
    margin: .5rem auto;
    font-size: .4rem !important;
}

#menuS3e .selected_tab {
    background-color: white !important;
    color:black !important;
    border-radius: 4px;
    
    
}

#menuS3e ul .ui-menubutton.ui-widget.selected_tab span{
    background-color: white !important;
    color:black !important;
    border-radius: 4px;
    
}*/


    .carousel-button2{
    font-weight: 500 !important;
    border-radius: 12px;
    color: white;
    display: inline-block;
    line-height: unset !important;
    padding: .4rem .7rem !important;
    text-align: center;
    margin: .5rem auto;
    font-size: .8rem !important;
}





#menuS3e .selected_tab {
    /*padding: 0 !important;*/
    background-color: #ffffff3d !important;
    color: white !important;
    border-radius: 4px;
    
    
}

#menuS3e ul .ui-menubutton.ui-widget.selected_tab span{
    /*background-color: white !important;*/
    /*color:black !important;*/
    border-radius: 4px;
    
}



.course-type2 {
    font-size: 0.65rem; /* Converted to rem */
    font-weight: bold;
    float: left;
    margin: 1rem 0.625rem 0.313rem 0.625rem; /* Converted to rem */
}

.bg-g-green{
    /*background-color: green !important;*/
    background: #2196F3;
    color: #ffffff;
}

#accordion {
 font-family:Roboto !important;
 font-size:0.95rem !important;       
}

.search-input{
    font-size:0.8rem !important;
}

.roboto {
    
    font-family: Roboto ;
}

.text-black{
    color:black;
}

.ui-sortable-column-icon {
    color: #1767c2 !important;
}

.custom-blue-stars .ui-rating-star {
    color: blue; 
}

.custom-blue-stars .ui-rating-star-on {
    color: blue; 
}

.custom-blue-stars .ui-rating-star-off {
    color: lightblue;
}

body {
    font-family: 'Roboto', sans-serif !important;
}


/*body, .ui-widget {
    font-family: 'Roboto', sans-serif !important;
}*/

.new_list_grid_custom_css{
    
    width:100%;
    height:14rem; 
    border: 1px solid #dee2e6;    
}


@media only screen and (min-width: 37.5rem) and (max-width: 56.25rem) {
    
 .new_list_grid_custom_css{
    
    width:100%;
    height:10rem; 
    border: 1px solid #dee2e6;    
}

div#panel-buttons2 button{
    width: 50%;
}
    
}

@media only screen and (max-width: 37.5rem) {
 
    .new_list_grid_custom_css{
    
    width:100% !important;
    height:8rem; 
    border: 1px solid #dee2e6;    
}

div#panel-buttons2 button{
    width: 100%;
}
    
}

#courseListForm input{
    
    width: 80% !important;
}


.dsp_overlap_image{
    
    width: 7.5rem;
    height: 2.9rem; 
    position: absolute; 
    top: 4px; 
    left: 0;
    box-shadow: 0 0 14px 0 #7c7b7b;
    border-radius: 0 6px 6px 0;
}

.passculture_overlay_image {
    width: 4rem;
    height: 4rem;
    position: absolute;
    top: 4px;
    right: 0;
}


.dsp_overlap_image_carousel{
    
 position: absolute; 
 top: 0.5rem; 
 left: 0;
 margin-left:5px;
 z-index: 10; 
 width: 11.4rem; 
 height: 4.4rem; 
 box-shadow: 0 3px 6px rgba(0, 0, 0, 0.30), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 0 6px 6px 0;
    
}

.carousel_main_image{
   width: 70% !important; 
   height:15rem !important;
   object-fit:cover !important;
   border-bottom:solid 1px grey; 
    
}

.border_bottom{
    border-bottom:solid 2px lightgrey;
}


.form-side-l55 {
    width: 55%;
    float: left;
    box-sizing: border-box;
}

.form-side-r40 {
    width: 40%;
    float: right;
    box-sizing: border-box;
    margin:auto;
}

/* Media query for tablets (48rem and below) */
@media (max-width: 64rem) {
    .form-side-l55, .form-side-r40 {
        width: 100%;
        margin-right:1rem;
        float: none;  /* Stack them vertically */
    }
}

.view_catalogue_button{
    
   background: #F49C13 !important;
    
}

.export_table_button{
    
 background: #58873B !important;
    
}

.download_validations_button{
    
   background: #2659B5 !important;
    
}

.close_year_button{
    
  background: #3B82F6 !important; 
}


#upload_devis.ui-fileupload-buttonbar .ui-button-text {
     display: block !important;
}

.requestForm#upload_devis_label{
    display:flex !important;
}

.ui-autocomplete {
    width: 100%;
    cursor: pointer;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: relative;
    display: contents;
}

.ui-autocomplete-multiple-container {
    clear: left;
    cursor: text;
    list-style-type: none;
    margin: 0;
    min-height: 1px;
    overflow: hidden;
    width: auto !important;
    /*width: 50rem !important;*/
}

#cat_menu_button{    
  background-color: #FF9F42 !important;
}


.ui-knob input[disabled="disabled"]{    
 background: transparent !important;   
}

.candidature-detail2.content2 {
    max-width: 34.375rem; /* 550px converted to rem */
    margin-bottom: 1rem;
    color: #272727;
    font-family: Roboto, sans-serif;
    font-size: 1rem; /* 10pt converted to rem */
    text-align: justify;
    padding-left: 1.875rem; /* 30px converted to rem */
    line-height: 1.5rem; /* Assuming line-height remains unchanged */
    font-weight: normal !important;
}

.ui-panel-titlebar-icon {
    background: white !important;
}

#panel-buttons2 button{
   /* margin: auto;*/
    height: auto;
    padding: .45rem 0px;
    font-size: .9rem !important;
    border-color: transparent;
    position: initial !important;
    border-radius: .45rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

div#panel-buttons2{
    /*margin-top: auto;
    display: flex;*/
    width: 100%;
    position: initial !important;
    margin-top: 0.5rem;
}

div#panel-buttons2 button{
    width: 20%;
}



div#panel-buttons2 button span{
    position: initial !important;
    padding: unset !important;
    font-size:1.2rem;
    font-weight:bolder;
}

#panel-buttons2 .ui-icon{
    display: contents !important;
}
#panel-buttons2 .ui-icon::before{
    padding: 8px !important;
    font-size:1.5rem;
    margin-right:8px;
}

.col-3 {
    flex: 0 0 auto;
    padding: 0.25rem !important;
    width: 25%;
}

.knob_font{
    font:18px bold Roboto !important;
}


.carousel-1-item {
    width: 33%;
    margin: auto;
}

.carousel-2-items {
    width: 66%;
    margin: auto;
}

.carousel-3-items {
    width: 100%;
}

.carousel-center {
    display: flex;
    justify-content: center;
}


/* Tablet screens (768px to 1024px) */
@media (max-width: 75rem) {
    .carousel-1-item,
    .carousel-2-items {
        width: 70%; /* Increase width for better layout on tablet */
        max-width: none;
    }

    .carousel-3-items {
        width: 100%;
    }
}

/* Mobile screens (up to 767px) */
@media (max-width: 48rem) {
    .carousel-1-item,
    .carousel-2-items,
    .carousel-3-items {
        width: 100%;
    }
}



/*@media (min-width: 37.5rem){
    .custom-grid{
        columns: 2;
    }
}

@media (min-width: 64rem) {
    .custom-grid {
        columns: 3;
    }
}

@media (min-width: 76rem) { 
    .custom-grid  {
        columns: 4;
    }
}*/

@media (min-width: 37.5rem){
    .ui-datagrid-column{
        flex: 0 0 50%;
    }
    #partnerForm .top-logo-img2 {
        height: 4rem;
        margin-top: -4.25rem;
    }
}

@media (min-width: 64rem) {
    .ui-datagrid-column {
        flex: 0 0 33.33%;
    }
    #partnerForm .top-logo-img2 {
        height: 6rem;
        margin-top: -6.25rem;
    }
}

@media (min-width: 76rem) { 
    .ui-datagrid-column  {
        flex: 0 0 25%;
        padding-left: 2% !important;
        padding-right: 3% !important;
    }
    #partnerForm .top-logo-img2 {
        height: 8rem;
        margin-top: -8.25rem;
    }    
 }

.ui-datagrid .ui-datagrid-content {
    border: 0 !important;
    background: #ffffff;
    color: #495057;
    padding: 0rem !important;
}


.tag-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    background-color: #e0e0e0;
    color: #333;
    font-size: 1rem;
    margin: 2px;
    padding-left: 2.25rem;
}


.offer_status_overlay_image {
    width: 50%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
}


.catalog_label_bottom{
    
   padding-left:2rem;
   padding-right:2rem;
   margin-bottom: 1rem;
    
}

.custom-dialog .ui-dialog #refuse-dialog {
    width: 50% !important;
}

  .custom-radio .ui-radiobutton-item {
    margin-bottom: 0.8rem; /* adjust as needed */
  }


.user-common-theme,
.user-department-themes {
    min-width: 150px;
    max-width: 200px;
}

.theme-filter {
    width: 100%;
    max-width: 150px;
}

.no-theme {
    color: #999;
    font-style: italic;
}

.theme-info {
    margin-top: 5px;
    font-size: 0.9em;
}

.theme-label {
    font-weight: bold;
    color: #666;
}

.theme-titles {
    color: #333;
}

.test-value {
    color: red;
    font-weight: bold;
    background-color: yellow;
    padding: 2px 5px;
    border: 1px solid red;
}
.theme-titles-multiline {
    white-space: pre-line !important;
    line-height: 1.4;
    padding: 4px 0;
}

#adminSpaceForm thead tr span:not(.ui-icon) {
    /*color: white !important;*/
    font-size: 12pt;
    display: inline-flex;
}

#adminSpaceForm thead th .ui-column-title {
    font-weight: 700;
    vertical-align: sub;
    /*color: white !important;*/
}




.course-detail-dialog2{
    
    background-color: white;    
    border: 0.313rem solid #1767c2 !important;
    padding: 1.5rem 0rem 0.625rem 0rem !important;
    }
        
    #adminSpaceForm .course-detail-dialog2 label {
     display: ruby-text !important;
    
}

    #adminSpaceForm .course-detail-dialog2 td.ui-panelgrid-cell{
     vertical-align: baseline !important;
    
}

.course-detail-dialog2 .ui-panelgrid,
.course-detail-dialog2 .ui-panelgrid td,
.course-detail-dialog2 .ui-panelgrid tr {
    border: none !important;
    margin-top: 1rem !important;
}

.offer-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 1rem;
}

.offer-title {
    margin: 0;
}

.print-button {
    white-space: nowrap;
}

#adminSpaceForm .ui-datatable-data td.school-label .list-school-college,
#companySpaceForm2 .ui-datatable-data td.school-label .list-school-college {
    display: block;
    margin-bottom: 0.25rem;
}

#adminSpaceForm .ui-datatable-data td.school-label .list-school-porteur,
#companySpaceForm2 .ui-datatable-data td.school-label .list-school-porteur {
    display: inline-block;
    margin-bottom: 0.25rem;
}

#adminSpaceForm .ui-datatable-data td.school-label .list-school-city,
#companySpaceForm2 .ui-datatable-data td.school-label .list-school-city {
    display: block;
    margin-top: 0.25rem;
    font-size: 9pt;
    color: rgb(39, 39, 39);
    font-style: italic;
}

#companySpaceForm2 thead tr .ui-selectonemenu.ui-custom-filter {
    width: 100%;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .catalogue-period-range-panel.ui-datepicker-multiple-month .ui-datepicker-group,
    .catalogue-period-range-panel.ui-datepicker-multi-2 .ui-datepicker-group {
        display: block !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .catalogue-period-range-panel .ui-datepicker-calendar {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
    }

    .catalogue-period-range-panel .ui-datepicker-calendar th,
    .catalogue-period-range-panel .ui-datepicker-calendar td {
        padding: 0.125rem 0 !important;
        text-align: center !important;
        font-size: 0.875rem !important;
    }

    .catalogue-period-range-panel .ui-datepicker-calendar td span,
    .catalogue-period-range-panel .ui-datepicker-calendar td a {
        width: auto !important;
        max-width: 100% !important;
        min-height: 1.75rem !important;
        line-height: 1.75rem !important;
        margin: 0 auto !important;
        padding: 0.125rem 0 !important;
        box-sizing: border-box !important;
        font-size: 0.875rem !important;
    }

    .catalogue-period-range-panel .ui-datepicker-header {
        padding: 0.25rem 0 !important;
        font-size: 0.875rem !important;
    }

    .catalogue-period-range-panel.ui-datepicker-touch-ui,
    .ui-datepicker-touch-ui.catalogue-period-range-panel {
        min-width: unset !important;
    }

    /* Native scrollPanel wrapper for stacked months on mobile */
    .catalogue-period-range-scroll-panel.ui-scrollpanel-native {
        max-height: 60vh !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        width: 100% !important;
        box-sizing: border-box;
    }

    .catalogue-period-range-scroll-panel .ui-scrollpanel-content,
    .catalogue-period-range-scroll-panel.ui-scrollpanel-native .ui-datepicker-group {
        position: static !important;
        width: 100% !important;
    }
}

 

/************************************************************************************/

/* FXL 260921 : modales d'action groupee sur les demandes d'une offre
   ("Rejeter les candidatures", "Message aux candidatures"), portees du projet ecole.
   .ui-dialog n'a pas de fond propre et son contenu, en content-box, est plus etroit
   que le panneau : la bande de droite - celle qui porte la croix de fermeture -
   laissait voir la page au travers (ces dialogs ne sont pas modaux).
   S'y ajoutent la pastille blanche de la croix et les espacements entre la barre de
   titre, l'intitule et la zone de saisie. */
.bulk-action-dialog.ui-dialog {
    background: #ffffff !important;
    opacity: 1 !important;
    overflow: hidden;
}

.bulk-action-dialog .ui-dialog-content,
.bulk-action-dialog .ui-dialog-footer {
    background: #ffffff !important;
    opacity: 1 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    padding: 1.25rem 1.5rem 1.5rem !important;
}

.bulk-action-dialog .ui-dialog-titlebar {
    width: auto !important;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    height: auto;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem 0.5rem 1rem !important;
    overflow: hidden;
}

/* ui-helper-clearfix ajoute un ::after en display:table : en contexte flex il devient
   un troisieme element et repousse la croix vers l'interieur. */
.bulk-action-dialog .ui-dialog-titlebar::before,
.bulk-action-dialog .ui-dialog-titlebar::after {
    content: none !important;
    display: none !important;
}

.bulk-action-dialog .ui-dialog-titlebar .ui-dialog-title {
    flex: 1 1 auto;
    white-space: normal;
    line-height: 1.25;
}

.bulk-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon,
.bulk-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close {
    background: #ffffff !important;
    background-image: none !important;
    border: none;
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    min-width: 1.75rem;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    box-shadow: none;
}

.bulk-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-icon .ui-icon,
.bulk-action-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon {
    margin: 0;
}

.bulk-action-dialog .ui-dialog-content label.ui-outputlabel {
    display: block;
    margin-top: 0.5rem;
    margin-bottom: 0.9rem;
    line-height: 1.35;
}

/* FXL 260922 : vignette unique en version carrousel. Les diapositives des carrousels
   (accueil, favoris, offres partagees, offres du partenaire, fiche structure, offres
   similaires, pages thematiques 77) incluent desormais la meme vignette que le catalogue ;
   elles n'ont plus de balisage propre. Le conteneur .product-item-content fixe deja la
   largeur, la vignette s'y adapte. */
.course-card-carousel {
    width: 100% !important;
    height: auto !important;
    border: none !important;
}
.course-card-carousel .course-card-college-image { height: 11rem !important; }
.course-card-carousel .course-card-college-media { max-height: 11rem; }

/* FXL 260922 : vignette partagee liste / diaporama / carrousels (course_card.xhtml). Le
   conteneur de l'illustration portait la classe utilitaire max-h-13rem en dur ; la hauteur est
   desormais en CSS pour que les variantes puissent la relever sans toucher au balisage. */
.course-card-college-media { max-height: 13rem; }

/* =====================================================================================
   FXL 260922 : infobulle de la carte Google Maps, portee du projet Ecole. Chaque offre du
   point est une zone cliquable : vignette, titre colore par domaine, structure et periode.
   La police n'est pas imposee : l'infobulle herite de celle du site (le projet Ecole y force
   Orkney, absente ici).
   ===================================================================================== */
.map-offers { max-width: 26rem; }
.map-offer {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.6rem 0.4rem; cursor: pointer; border-radius: 6px;
}
.map-offer:hover, .map-offer:focus { background: #f2f5fb; outline: none; }
.map-offer + .map-offer { border-top: 1px solid #e3e6ea; }
.map-offer-thumb {
    flex: 0 0 5.5rem; width: 5.5rem; height: 4rem; border-radius: 4px; background-size: cover; background-position: center; background-color: #eef0f3;
}
.map-offer-thumb-empty { background-image: none; }
.map-offer-body { flex: 1 1 auto; min-width: 0; }
.map-offer-title { font-weight: bold; font-size: 0.8rem; text-transform: uppercase; line-height: 1.1rem; margin-bottom: 0.3rem; }
.map-offer-line { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #333333; line-height: 1.1rem; }
.map-offer-line i { width: 1rem; flex: 0 0 1rem; font-size: 0.9rem; }
.map-offer-line span { font-weight: bold; }
.map-offer-line + .map-offer-line span { font-weight: normal; }

/* FXL 260922 : croix de fermeture de l'infobulle en surimpression. Google Maps place le
   bouton dans une barre d'en-tete (.gm-style-iw-chr) de 48px qui reste dans le flux et
   dessine une bande blanche au-dessus de la premiere offre. On sort la barre du flux ;
   la pastille blanche translucide garde la croix lisible par-dessus une vignette. */
.gm-style .gm-style-iw-chr {
    position: absolute;
    top: 0;
    right: 0;
    height: auto;
    min-height: 0;
    z-index: 3;
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect {
    width: 2rem !important;
    height: 2rem !important;
    margin: 0.25rem 0.25rem 0 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.gm-style .gm-style-iw-chr .gm-ui-hover-effect > span { margin: auto !important; }
.gm-style .gm-style-iw-c { padding-top: 0 !important; }
.gm-style .gm-style-iw-d { overflow: auto !important; }
/* le titre de la premiere offre ne doit pas passer sous la croix */
.map-offers .map-offer:first-child .map-offer-title { padding-right: 2.25rem; }


/* FXL 260922 : barre des trois boutons de vue du catalogue (liste / carte / diaporama).
   Un gap unique remplace les marges individuelles, qui produisaient des ecarts inegaux. */
.catalogue-view-buttons {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

/* FXL 260922 : periode de l'offre sur les vignettes (liste, carrousels, diaporama).
   Span en display:block pour rester valide a l'interieur des <p> existants.
   0.7rem = 80 % du 0.875rem de la classe text-sm portee par le nom de la structure. */
.course-card-period {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #444444;
    /* FXL 260922 : la marge haute manquait, la date se collait au nom de la structure qui est
       en display:inline. 0.8rem donne 13px au-dessus comme au-dessous (mesure en recette). */
    margin: 0.8rem 0.8rem 0.6rem 0.8rem;
}

/* =====================================================================================
   FXL 260922 : Vue diaporama du catalogue public (bouton a droite de la vue cartographique,
   parametre admin show_slideshow). Troisieme mode d'affichage, au meme titre que la liste et
   la carte : le carrousel s'affiche DANS la page, et le bouton "Plein ecran" de sa barre
   d'outils le passe en plein ecran via la Fullscreen API.

   FORMAT UNIQUE : la diapositive n'a plus de balisage propre, elle inclut la meme vignette
   que la vue en liste (course_card.xhtml) avec la classe .catalogue-slideshow-card. Elle
   herite donc du bandeau de statut, du picto prevention, du pass Culture, des dates et des
   domaines. Les regles ci-dessous ne font que la redimensionner.
   ===================================================================================== */
.catalogue-slideshow-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 70vh;
    background: #ffffff;
    padding: 1rem;
    box-sizing: border-box;
}

.catalogue-slideshow-wrapper:fullscreen{
    height: 100%;
    padding: 2rem;
}
.catalogue-slideshow-wrapper:-webkit-full-screen{
    height: 100%;
    padding: 2rem;
}

/* barre d'outils du diaporama : plein ecran + retour a la liste */
.catalogue-slideshow-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 0 0 auto;
    margin-bottom: 0.5rem;
}
.catalogue-slideshow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #ffffff;
    color: #333333;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    line-height: 1;
}
.catalogue-slideshow-btn:hover { background: #eeeeee; }
/* en plein ecran le retour a la liste n'a pas de sens : seul le bouton plein ecran reste */
.catalogue-slideshow-wrapper:fullscreen .catalogue-slideshow-exit{ display: none; }
.catalogue-slideshow-wrapper:-webkit-full-screen .catalogue-slideshow-exit{ display: none; }

.catalogue-slideshow-carousel { flex: 1 1 auto; min-height: 0; }
/* PrimeFaces pose un style inline height:auto sur le viewport du carrousel, et les conteneurs
   intermediaires n'ont aucune hauteur : sans ces regles le viewport se dimensionne sur son
   contenu et rogne le bas des diapositives. Le !important est necessaire face au style inline. */
.catalogue-slideshow-carousel .ui-carousel-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.catalogue-slideshow-carousel .ui-carousel-container {
    height: 100% !important;
    min-height: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.catalogue-slideshow-carousel .ui-carousel-items-content {
    height: 100% !important;
    min-height: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.catalogue-slideshow-carousel .ui-carousel-items-container,
.catalogue-slideshow-carousel .ui-carousel-item { height: 100% !important; min-height: 0; }
.catalogue-slideshow-carousel .ui-carousel-indicators { display: none !important; }
.catalogue-slideshow-carousel .ui-carousel-prev,
.catalogue-slideshow-carousel .ui-carousel-next {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d0d0d0;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
}

.catalogue-slideshow-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* la vignette partagee, en version diaporama : largeur libre (elle suit l'illustration),
   illustration plafonnee en hauteur et jamais rognee (object-fit:contain pose par la vue). */
.catalogue-slideshow-card {
    width: auto !important;
    max-width: 70vw;
    height: auto !important;
    border: none !important;
}
.catalogue-slideshow-card .course-card-college-image { max-height: 45vh; }
.catalogue-slideshow-card .course-card-college-media { max-height: none; }

/* FXL 260922 : agrandissement de 33 % de la diapositive, EN PLEIN ECRAN UNIQUEMENT.
   Un transform ne modifie pas le flux : le carrousel et ses fleches gardent leur position,
   seule la diapositive est mise a l'echelle depuis son centre. Le plafond de l'illustration
   reste a 45vh : agrandi il occupe 60vh, et laisse la place au titre, a la structure, aux
   dates et aux domaines, qui montent eux aussi de 33 %. */
.catalogue-slideshow-wrapper:fullscreen .catalogue-slideshow-card{
    transform: scale(1.33);
    transform-origin: center center;
}
.catalogue-slideshow-wrapper:-webkit-full-screen .catalogue-slideshow-card{
    transform: scale(1.33);
    transform-origin: center center;
}
.catalogue-slideshow-empty { display: block; text-align: center; padding: 2rem; }

/* telephones et petits ecrans : la carte prend presque toute la largeur */
@media screen and (max-width: 767px) {
    .catalogue-slideshow-wrapper { padding: 0.5rem; }
    .catalogue-slideshow-wrapper:fullscreen{ padding: 1rem; }
    .catalogue-slideshow-wrapper:-webkit-full-screen{ padding: 1rem; }
    .catalogue-slideshow-card { max-width: 96vw; }
    /* en plein ecran la vignette est agrandie de 33 % : on plafonne a 72vw pour rester sous 96vw */
    .catalogue-slideshow-wrapper:fullscreen .catalogue-slideshow-card{ max-width: 72vw; }
    .catalogue-slideshow-wrapper:-webkit-full-screen .catalogue-slideshow-card{ max-width: 72vw; }
    .catalogue-slideshow-card .course-card-college-image { max-height: 38vh; }
}

/* FXL 260928 : ecran Parametres - heure de la relance automatique PerDir (champ masque hh:mm). */
.perdir-hour-input.ui-inputfield { display: inline-block; width: 4.2rem !important; height: 2.2rem; margin: 0 0.4rem !important; padding: 0 0.3rem; text-align: center; vertical-align: middle; box-sizing: border-box; }

/* FXL 260928 : ecran Parametres - interligne entre les options (blocs admin-option). */
.admin-parameter-options .admin-option { margin: 0.7rem 0; line-height: 1.4; }
.admin-parameter-options .admin-option .ui-chkbox { vertical-align: middle; margin-right: 0.3rem; }

/* FXL 260928 : ecran Parametres - marge sous le titre "Gestion des parametres de la plateforme"
   et niveau de moderation presente en boutons (SelectOneButton). */
.request-form.admin-content .admin-parameter-options.moderation-block { margin-top: 1.5rem; }
.admin-parameter-options .ui-selectonebutton { margin: 0.4rem 0 0.2rem; }