/*
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: 1rem;
    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;
}


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