body{ 
    margin: 0; 
    padding: 0;
  /*   background-color : #575c62;
   background-image: #C0C0FF;       url('images/fond.png')   
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;   */
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
     /*'Old Standard TT', */
    font-size: 13px;
}      

/* Course selection on top of page */
    .course_selected { 
        width:100%; 
        margin-bottom:2em;
        text-align:center;
    }     
    .select_course {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none; 
        border: none;
        /* needed for Firefox: */
        overflow:hidden;
        /*width: 120%;
        background-color: transparent !important;*/
        text-align-last: center;
    } 
/**/


/* THM tables styles */
    .time_bars_td {
        text-align:left;
        width:110px;
        font-size: 0.8em;
    }

    .remove_spaces {
        padding:0px !important;
        margin:0px !important;
        border:0px !important;
    }
/**/



/* Titles and separators */

    h1 {
        font-size: 26px;        font-weight: bold;        color: #123f61;         text-align: center; 
    }           
            
    h2 {
        font-size: 24px;        font-weight: bold;        color: #123f61;          text-align: center; 
    }          
            
    h3 {
        font-size: 20px;        font-weight: bold;        color: #123f61;          text-align: center; 
    }            

    h4 {
        font-size: 15px;        font-weight: bold;        color: #123f61;          text-align: center; 
    }     

            
    hr {          
        border: 0.5px dotted blue;
        border-top-width: 0.5px;        border-bottom-width: 0px;        border-left-width: 0px;        border-right-width: 0px;
    }              

    hr.separator {          
        border: 0.5px dotted rgb(0, 0, 99);
        border-top-width: 0.5px;                border-bottom-width: 0px;        border-left-width: 0px;        border-right-width: 0px;
        margin-top: 30px;                       margin-bottom: 20px;
    }    
    
/* */


/* DRAG and DROP */
    .dropbox_container {
        border: 1px solid #8a8a8a;      border-radius: .2em;
        min-height: 50px;
    }
    
    .dropbox_container.over {
        border: 3px dotted #4ec063;      border-radius: .2em;
        /*  margin: 5px;  */
    }
    
    .dropbox_container.overprep {
        border: 1px dotted #666;      border-radius: .2em;
      /*  margin: 5px;  */
        opacity: 0.4;
    }
    
    .dragbox {
        border: 1px solid #85c591;      border-radius: .2em;
        cursor: move;
    }
    
    .dragbox_container {
        border: 1px solid #8a8a8a;      border-radius: .2em;
    }
    
    .dragbox.over {
        /*background-color:#af7475;*/
        cursor: move;
    }
    
    [draggable] {
        user-select: none;
    }
/* */


/* FORMS */
    input:not([type="submit"]), 
    select, 
    textarea{
        background-color: #ebebeb !important;   
        font-size:0.9em;
    }
    textarea {
        margin-top:5px;
    }   

    .form-group input, textarea {
        padding-top:0px;
        padding-bottom:0px;
        margin-bottom:2px; 
        margin-top:2px; 
        font-size:0.9em;
    }

    .form-control input, textarea {
        padding-top:0px;
        padding-bottom:0px;
        margin-bottom:2px; 
        margin-top:2px; 
        font-size:0.9em;
    }


    input:not([type="submit"]):read-only, 
    select:disabled, 
    textarea:read-only {
        padding-top:0px;
        padding-bottom:0px;
        margin-bottom:2px; 
        margin-top:2px;   
        font-size:0.9em;
        background-color: #a1a1a1 !important;  
    }
    
/*
    input[type="submit"] {
        cursor:pointer; 
        padding:5px 25px; 
        background:#1f4d72; 
        border:1px solid #a8a88d; 
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
        -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
        box-shadow: 0 0 4px rgba(0,0,0, .75);
        color:#f3f3f3;
        font-size:1.1em;
        }

    input[type="submit"]:hover, input[type="submit"]:focus{
    background-color :#123b5c; 
    -webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
    -moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
    box-shadow: 0 0 1px rgba(0,0,0, .75);
    }       */

    button, input[type="submit"] {
        /*give the button a drop shadow box-shadow: none; */
        -webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
        -moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
        box-shadow: 0 0 4px rgba(0,0,0, .75);

        align-items: center;
        appearance: none;
        background-color: #3EB2FD;
        background-image: linear-gradient(1deg, #4F58FD, #149BF3 99%);
        background-size: calc(100% + 20px) calc(100% + 20px);
        border-radius: 100px;
        border-width: 0;
        
        box-sizing: border-box;
        color: #FFFFFF;
        cursor: pointer;
        display: inline-flex;
        font-family: CircularStd,sans-serif;
        font-size: 1rem;
        height: auto;
        justify-content: center;
        line-height: 1.5;
        padding: 6px 20px;
        position: relative;
        text-align: center;
        text-decoration: none;
        transition: background-color .2s,background-position .2s;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        vertical-align: top;
        white-space: nowrap;
    }

    button:disabled,
    input[type="submit"]:disabled {
        background-color: #b5b5b5;
        background-image: none;
        color: #666;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.7;
    }

    
    .btn-small { 
        line-height: 1.2;
        padding: 3px 10px;
        font-size: 0.8rem;
    }

    button:active,
    button:focus,
    input[type="submit"]:active,
    input[type="submit"]:focus {
        outline: none;
    }
    
    button:hover,
    input[type="submit"]:hover {
        background-position: -20px -20px;
    }
    
    button:focus:not(:active),
    input[type="submit"]:hover {
        box-shadow: rgba(40, 170, 255, 0.25) 0 0 0 .125em;
    }
    

    .disabledInput {                 
        background-color: #E0E0E0 !important;
        color: #808080 !important;
    } 
/* */
   
   


/* Sticky style for sticky iframe (going down with scroll) */
.sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 0;
}




  
.miniEntete {                 
    font-size: 8px;
    text-align: center;
    width:30px;
}                                    

#accesrapide {        
    color: #701b1c;                     
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;   
}
        
   

#colonne1 {
    float: left;
    border:1px dotted blue;
} 
                   
#colonne2 {
    float: left;
    border:1px dotted blue;
}
                   
#colonne1_sansBords {
    float: left;
} 
                   
#colonne2_sansBords {
    float: left;
}             

.jumbo_portail {
    background-color: #e9ecef;
    border-radius: 0.3rem;
}

/* @media (min-width: 576px) { */
.jumbo_portail {
    padding: 1rem 1rem;
    margin-bottom: 2rem;
}

#colonne1 {
    width: 480px;
    padding-top: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
} 
                
#colonne2 {
    width: 480px;  
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}
                
#colonne1_sansBords {
    width: 480px;           
    margin-right: 20px;
    margin-bottom: 20px;    
    padding-left: 10px;
    padding-right: 10px;
} 
                
#colonne2_sansBords {
    width: 480px;            
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 20px;
}


@media (min-width: 768px) {
    .jumbo_portail {
        padding: 1rem 1rem;
        margin-bottom: 2rem;
    }
    
    #colonne1 {
        width: 660px;
        padding-top: 10px;
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    } 
                    
    #colonne2 {
        width: 660px;  
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
                    
    #colonne1_sansBords {
        width: 660px;          
        margin-bottom: 20px;    
        padding-left: 10px;
        padding-right: 10px;
    } 
                    
    #colonne2_sansBords {
        width: 660px;            
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) {
    .jumbo_portail {
        padding: 0.5rem 0.5rem;
        margin-bottom: 2rem;
    }
    
    #colonne1 {
        width: 454px;
        padding-top: 10px;
        margin-right: 5px;
        margin-bottom: 20px;
        padding-left: 5px;
        padding-right: 5px;
    } 
                    
    #colonne2 {
        width: 454px;  
        padding-top: 10px;
        padding-left: 5px;
        padding-right: 5px;
        margin-bottom: 20px;
    }
                    
    #colonne1_sansBords {
        width: 456px;           
        margin-right: 20px;
        margin-bottom: 20px;    
        padding-left: 10px;
        padding-right: 10px;
    } 
                    
    #colonne2_sansBords {
        width: 456px;            
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
}
@media (min-width: 1200px) {
    .jumbo_portail {
        padding: 1rem 1rem;
        margin-bottom: 2rem;
    }
    
    #colonne1 {
        width: 520px;
        padding-top: 10px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding-left: 10px;
        padding-right: 10px;
    } 
                    
    #colonne2 {
        width: 520px;  
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
                    
    #colonne1_sansBords {
        width: 520px;           
        margin-right: 20px;
        margin-bottom: 20px;    
        padding-left: 10px;
        padding-right: 10px;
    } 
                    
    #colonne2_sansBords {
        width: 520px;            
        padding-left: 10px;
        padding-right: 10px;
        margin-bottom: 20px;
    }
}
            
#vide
{                         
 background-color : transparent;    
 margin:0 auto;
 padding:0;
 min-height:20px; 
 width: 1px;
 text-decoration: none;
 color: white;
}               
#vide a
{
 text-decoration: none;
 color: white;
}       
         
.btn-small {
    background-color: #66B2FF; /* lighter version of #007BFF */
    background-image: none !important;
    font-size: 0.8rem;
    padding: 4px 8px;
    color: white;
    border: none;
    border-radius: 4px;
  }
  






/* Responsive adjustments for mobile devices */
@media (max-width: 767px) {
    /* Make the columns full width and adjust padding/margins */
    #colonne1,
    #colonne2,
    #colonne1_sansBords,
    #colonne2_sansBords {
         width: 100% !important;  /* Ensures the columns fill the mobile width */
         margin: 0 auto;
         padding-left: 10px;
         padding-right: 10px;
         box-sizing: border-box;  /* Include padding in the total width */
    }

    /* Adjust header font sizes if needed */
    h1 {
         font-size: 22px;
    }
    h2 {
         font-size: 20px;
    }
    h3 {
         font-size: 18px;
    }
    h4 {
         font-size: 16px;
    }
    
    /* Improve the course selection area readability */
    .course_selected {
         padding: 10px;
         font-size: 14px;
         text-align: center;
    }
    
    /* Optionally, adjust any other fixed size elements if necessary */
}