/**!
 * Samraworld ELC 2022
 * @file RegistrationPages.css
 * @desc  This core CSS is for the registration page.
 * @version v3 2022-02-17 - added this header info.  Adjusted background color and other look and feel stuff.
 * @author Charles A. Samra <charles@samraworld.net>
 * @see {@link teachers.samraworld.net }
 */
/************************************************************************************************************************************/	

input[type=text], [type=password], select, textarea {
  width: 100%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  background-color: white;
  margin-left: 3px;
}

input [type=number] {
  width: 10%;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  background-color: white;
  margin-left: 3px;
  text-align: right;
}

.RegistrationContainer {
	margin-bottom: 10px;	
}

/* registration */
.Registration_background {
	width: 90%;
	margin: 0 auto;
	background-color: snow;
	padding: 10px;
	min-height: calc(77vh - 70px);
}

.RegistrationPanel {
  padding-left: 120px;
  padding-right: 120px;
  min-height: calc(100vh - 180px);
}

.RegistrationMessage {
	font-style: normal;
	font-size: inherit;
	padding-top: 10px;
	padding-left: 5px;
	margin-left: 25%;
}

/* whatever... */
.apb_line_body {
    border: .1px solid #4413f3;
    margin: auto;
}

.sidepanel {
	float: left;
	vertical-align: top;
	width: 23%;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
	min-width: 200px;
}

.label {
	float: left;
	text-align: left;
	width: 15%; 
	font-weight: bold;
	margin-top: 10px;
	margin-right: 2px;
	margin-left: 10px;
    line-height: 20px;
    font-size: medium;
}

.input_text {
	float: left;
    margin-top: 10px;	
   	width: 80%;
}

.input_text_wrap_textarea {
	float: left;
    margin-top: 10px;
   	width: 70%;
  background-color: white;
}

.input_text_half {
	float: left;
    margin-top: 10px;	
   	width: 40%;
}

.input_number {
	float: left;
    margin-top: 10px;	
}
        
.input_dropdown {
	float: left;
    margin-top: 10px;	
    margin-bottom: 1px;
   	width: 30%;
}

.message {
	font-size: 1em;
}

.errors {
	color: red;
	padding-left: 30px;
	padding-bottom: 10px;
	padding-top: 10px;
}

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

/* SW2019 used by all labels */
label.field {
	text-align: left;
	margin-left: 15px;
	width: 145px;
	display: block; 
	float: left;
	font-weight: bold;
	padding:1px 3px;
}

/* SW 2019 used by add question answer type */
.box_checkbox {
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	display: inline-block;
	background-color: white;
	padding: 5px;
/*	border: solid #ffbcbc;*/
	border: solid #ccc;
    border-radius: 4px;
	width: 60%;
}

/* SW2019 used by all labels */
label span, .required {
	color: red;
	font-weight: bold;
}

/* FIELDSET IS IN sw_common.css */

.header {
	text-align: center;
	font-weight: bold;
	font-size: large;
	width:100%;
	display: block;
	padding-top: 10px;
}

.parasqueeze {
    display: inline-block;
    margin-block-start: 0.7em;
    margin-block-end: 0.2em;
    margin-inline-start: 45px;
    margin-inline-end: 45px;
    font-size: medium;	
}

hr.style1{
	border-top: 1px solid #8c8b8b;
	    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #e54c4c;

    padding: 0px;
}

#bottomACTIONpanel {
	clear:both;
/*	width: 50%; */
/*	margin-top: 20px; */
}
 
p.para {
    display:inline;
    margin-inline-start: 5px;
    margin-inline-end: 2px;
}

td.word_types {
	text-align: left;
	overflow: hidden;
	word-wrap: break-word;
	vertical-align: middle;
	padding-right: 20px;
}

input.submit {
	width: 180px;
} 

/* 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: 767px) {

	input[type=text], [type=password], select, textarea {
	  margin-left: 0;
	  padding-left: 10px;
	  padding-right: 10px;
	}

  .label, .input_text, .input_text_wrap_textarea, .input_text_half, .input_number, .input_dropdown, .box_checkbox {
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
    margin-right: 0;
    font-size: .8em;
  }
  .input_text_half {
	  margin-top: 0;
  }
  .header, .parasqueeze {
    width: 90%;
    margin-left: 20px;
    margin-right: 20px;
  }
  .RegistrationPanel {
  padding-left: 10px;
  padding-right: 10px;
}
}

@media screen and (max-width: 767px) {
  input[type=submit], input[type=button] {
    width: 100%;
    margin-top: 0px;
    padding-left: 0 !important;
    margin-left: 0 !important;
    font-size: .9em;
    }
    
    h1 {
	    font-size: large;
    }
    
    .parasqueeze {
	    display: none;
    }
    
    .message {
	font-size: .8em;
}
	label {
		font-size: .9em;
	}
}