ul, #myUL {
  list-style-type: none;
}

#myUL {
  margin: 0;
  padding: 0;
}

.caret {
  cursor: pointer;
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.caret::before {
  content: "\25B6";
  color: black;
  display: inline-block;
  margin-right: 6px;
}

.caret-down::before {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Safari */'
  transform: rotate(90deg);  
}

.nested {
  display: none;
}

.active {
  display: block;
}


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

.user-pass-form
{
border:solid 1.0px white;
 border-radius: 8px;
 background-color: lightgrey;
 padding:10px;
}


.guideline-session
{
 border:solid 2.1px lightgray;
  border-radius: 8px;
  padding: 10px;
  max-height: 525px;
  overflow: auto;
}

#form-user-id
{
  border-color: #7B241C ;
  border-width: 0px;
  border-style: solid;
  padding: 20px;
  background-color:  ;
}



.flip-card {
  background-color: transparent;
  width:200px;
  height:200px;
  border: 0px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
  margin-top: 5px;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: rgba(255,255,255,0.3);
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color:  rgba(0,0,0,0.3);
  color: white;
  transform: rotateY(180deg);
}

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

.colour_col
{
   position: relative;
  width: 100%;
  
}
.colours_image
{
  width: 100%;
  height: 180px;
  border-radius: 8%;
  
}

.colours_overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color:rgba(0,0,0,0.2);
  overflow: hidden;
  width: 100%;
  height: 100%;
 -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: .3s ease;
  transition: .3s ease;

  border-radius: 8%;
  
}
.colour_col:hover .colours_overlay
{
  
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}


.colours_text {
  color: white;
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  left: 50%;
   -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}

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

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* Set a style for all buttons */
button {
  background-color:blue;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: 0.1;
  cursor: pointer;
  width: 50%;
  float: left;
}

/* Add a hover effect for buttons */
button:hover {
  opacity: 0.8;
}