/* CSS Document */
	@font-face {
  font-family: noto_sr; /* Set font-names here */
  src: url("./../../../fonts/NotoSans-Regular.ttf"); /* Set link to font here */
} /* Set fontweight here - font-weight: bold; */


/* the following fonts are not used - so I comment them out */
/*
@font-face {
  font-family: noto_si; 
  src: url("../fonts/NotoSans-Italic.ttf"); 
} 

@font-face {
  font-family: noto_ser; 
  src: url("../fonts/NotoSerif-Regular.ttf"); 
} 

@font-face {
  font-family: noto_sei; 
  src: url("../fonts/NotoSerif-Italic.ttf"); 
} 
End of out-commenting */

/* this is for the confirmation bar on top */

.alert{position:relative;padding:.75rem 1.25rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}.alert-heading{color:inherit}.alert-link{font-weight:700}.alert-dismissible{padding-right:4rem}.alert-dismissible .close{position:absolute;top:0;right:0;padding:.75rem 1.25rem;color:inherit}.alert-primary{color:#004085;background-color:#cce5ff;border-color:#b8daff}.alert-primary hr{border-top-color:#9fcdff}.alert-primary .alert-link{color:#002752}.alert-secondary{color:#383d41;background-color:#e2e3e5;border-color:#d6d8db}.alert-secondary hr{border-top-color:#c8cbcf}.alert-secondary .alert-link{color:#202326}.alert-success{color:#155724;background-color:#d4edda;border-color:#c3e6cb}.alert-success hr{border-top-color:#b1dfbb}.alert-success .alert-link{color:#0b2e13}.alert-info{color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}.alert-info hr{border-top-color:#abdde5}.alert-info .alert-link{color:#062c33}.alert-warning{color:#856404;background-color:#fff3cd;border-color:#ffeeba}.alert-warning hr{border-top-color:#ffe8a1}.alert-warning .alert-link{color:#533f03}.alert-danger{color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}.alert-danger hr{border-top-color:#f1b0b7}.alert-danger .alert-link{color:#491217}.alert-light{color:#818182;background-color:#fefefe;border-color:#fdfdfe}.alert-light hr{border-top-color:#ececf6}.alert-light .alert-link{color:#686868}.alert-dark{color:#1b1e21;background-color:#d6d8d9;border-color:#c6c8ca}.alert-dark hr{border-top-color:#b9bbbe}.alert-dark .alert-link{color:#040505}

/*put the page in landscape mode and lock it 

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}
img {
	cursor: pointer;
}

.thumbnail:hover {
    position:relative;
    top:-25px;
    left:-35px;
    width:500px;
    height:auto;
    display:block;
    z-index:999;
}
*/

    #warning-message { display: none; }

    @media only screen and (orientation:portrait){

        #wrapper { display:none; }

        #warning-message { display:block; }

    }

    @media only screen and (orientation:landscape){

        #warning-message { display:none; }

    }'
div {
  font-family: noto_sr; /* Set class-names here */
}
	
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #f5dadf;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  }

input[type=tel] {
  width: 100%;
  padding: 12px;
  border: 1px solid #f5dadf;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  }

input[type=email] {
  width: 100%;
  padding: 12px;
  border: 1px solid #f5dadf;
  border-radius: 4px;
  box-sizing: border-box;
  resize: vertical;
  }

/* Style the label to display next to the inputs */
label {
  padding: 12px 12px 12px 0;
  font-family: noto_sr;
  display: inline-block;
  font-size: 85% !important; 
}

/* Style Titles like labels to display next to the inputs, but different fontstyle */
label2 {
  padding: 12px 12px 12px 0;
  display: inline-block;
  font-size: 85% !important; 
  font-weight: bold; 
}

label3 {
	padding: 12px 12px 12px 0;
	display: inline-block;
	font-size: 85% !important;
	font-weight: bold; 
	color: #f5dadf;
	cursor: pointer;
}

/* Style the reset button */
input[type=reset] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px 20px;
  border-color: white;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: right;
}

/* Style the submit button */
input[type=submit] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px 20px;
  border-color: #000000;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: right;
}

/* Style the file button */
input[type=file] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px;
  border-color: white;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: left;
}

/* Style the upload-type button */
input[type=button2] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px;
  border-color: white;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: left;
  text-align: center;
}

/* Style the cancel upload-type button */
input[type=button3] {
		-webkit-appearance: none;
  background-color: #f5dadf;
  color: black;
  padding: 12px;
  border-color: white;
  border-style: solid;
  border-radius: 30px;
  cursor: pointer;
  float: left;
  text-align: center;
}

/* Style the container */
.container {
  border-radius: 5px;
  background-color: #FFF;
  padding: 20px;
}

/* style the link-color */
a:link {
	color: #DF8A9A;
	text-decoration: none;
}

a:hover {
	color: #DF8A9A;
	text-decoration: none;
}

a:visited {
	color: slategrey;
	text-decoration: none;
}

a:active {
	color: #DF8A9A;
	text-decoration: none;
}

/* Style the row for the logo */
.row {
  border-radius: 5px;
  background-color: #FFFFFF;
 }

/*Style the erorr message */
.error {
  color: red;
  background-color: white;
  border-color: red;
  padding:1px 20px 1px 20px;
}

/* Style the tooltip */
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font-size: 75% !important; 
  }

/* Floating column for labels: 25% width */
.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

/* Floating column for inputs: 50% width */
.col-50 {
  float: left;
  width: 50%;
  margin-top: 6px;
}
/* Floating column for inputs: 75% width */
.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/*Add style for the movable select functions */
ol{
    cursor: grab 
}

 ul{
      list-style-type: none;
      padding-left: 0;
      }
    li,
    .ui-state-highlight {
      font-size: 85%;
      line-height: 18px;
      padding: 0.5em 1em;
      margin-bottom: 0.25em;
    	box-sizing: border-box;
    	height: auto;
    	max-width: 100%;
      background-color: #fff;
    	border: 1px solid #f5dadf!important;  

    }

    .ui-state-highlight{
    	display: block;
      background-color: #999;
    }

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit], input[type=reset] {
    width: 100%;
    margin-top: 0;
  }
}