body {
    font-family: Arial, Helvetica, sans-serif;
    min-width: 1500px;
    padding-top: 3px;
    padding-bottom: 3px;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
     user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}


.header {
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 16px;
    color: #000666;
}

.container {
    text-align: center;
    width: 1500px;
    max-width: none !important;
    margin: 0px auto;
    background-color: #fcfcfc;
    border: 1px solid #ddd;
}
.column {
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 5px;
    padding-right: 5px;
    width: 150px;
    fond-size: 18px;
    text-align: center;
    display: inline-block; 
    margin: auto; 
    color: #000066;
} 

.footer {
    background-color: #f1f1f1;
    padding: 20px;
    height: 30px;
    text-align: justify;
}

.course {
    display: block;
    border: none;
    width: 120px;
    padding: 5px; 
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    margin: auto; 
    cursor: pointer;
    opacity: 1;
}

.blank {
    display: block;
    border: 3px solid #fcfcfc;
    color: #fcfcfc; 
    width: 120px;
    padding: 5px; 
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    margin: 4px 2px;
    margin: auto; 
}
.class, .class:hover  {
    background-color: #36bc79;
    color: white;
    border: 3px solid #36bc79;
}

.class1, .class1:hover {
    background-color: #487063;
    color: white;
    border: 3px solid #487063;
}

.class2, .class2:hover {
    background-color: #ff9e1e;
    color: white;
    border: 3px solid #ff9e1e;
}

.class3, .class3:hover {
    background-color: #ff691e;
    color: white;
    border: 3px solid #ff691e;
}

.class4, .class4:hover {
    background-color: #3b92cc;
    color: white;
    border: 3px solid #3b92cc;
}

.class5, .class5:hover {
    background-color: #8b36bc;
    color: white;
    border: 3px solid #8b36bc;
}

.class6, .class6:hover {
    background-color: #4e5156;
    color: white;
    border: 3px solid #4e5156;
}

.button1 {
    background-color: white;
    color: #36bc79; 
    border: 3px solid #36bc79;
}

.button1:hover {
    background-color: #36bc79;
    color: white;
    border: 3px solid #36bc79;
}

.button2 {
    background-color: white; 
    color: #8b36bc; 
    border: 3px solid #8b36bc;
}

.button2:hover {
    background-color: #8b36bc;
    color: white;
    border: 3px solid #8b36bc;
}

.button3 {
    background-color: white; 
    color: #3b92cc; 
    border: 3px solid #3b92cc;
}

.button3:hover {
    background-color: #3b92cc;
    color: white;
    border: 3px solid #3b92cc;
}

.button4 {
    background-color: white; 
    color: #bc3667; 
    border: 3px solid #bc3667;
}

.button4:hover {
    background-color: #bc3667;
    color: white;
    border: 3px solid #bc3667;
}

.button5 {
    background-color: white; 
    color: #ff691e; 
    border: 3px solid #ff691e;
}

.button5:hover {
    background-color: #ff691e;
    color: white;
    border: 3px solid #ff691e;
}

.button6 {
    background-color: white; 
    color: #ff9e1e; 
    border: 3px solid #ff9e1e;
}

.button6:hover {
    background-color: #ff9e1e;
    color: white;
    border: 3px solid #ff9e1e;
}

.button7 {
    background-color: white; 
    color: #487063; 
    border: 3px solid #487063;
}

.button7:hover {
    background-color: #487063;
    color: white;
    border: 3px solid #487063;
}

.button8 {
    background-color: white; 
    color: #4e5156; 
    border: 3px solid #4e5156;
}

.button8:hover {
    background-color: #4e5156;
    color: white;
    border: 3px solid #4e5156;
}