/* 
	Samraworld English Learning Center
	This CSS is for the add pages, such as add curriculum and add lesson
*/

* {
  box-sizing: border-box;
}

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

.left3QTRpanel {
	float: left;
	width: 75%;
	margin-top: 5px;
	margin-left: 1%;
	background-color: snow;
/*	min-height: calc(78vh - 70px); */
	min-height: calc(100vh - 180px);
}

.leftPROMPTSpanel {
 	border-radius: 5px;
 	background-color: white;
 	padding-left: 2px;
	min-height: calc(100vh - 180px);
}

.DeletedPanel {
	float: left;
	width: 100%;
 	border-radius: 5px;
 	background-color: white;
 	padding-left: 2px;
}

#bottomACTIONpanel {
	clear:both;
/*	width: 50%; */
/*	margin-top: 20px; */
}

.error {
	color: red;
}

.error_div{
	width: 20%;
}

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

/***************************************************/
/* Samraworld Language Learning 2019 				*/
/* used for all add page headings 	 			*/
/* Add Page Header "aph"	 						*/
/***************************************************/

div.aph_panel_main {
/*  display: inline-block;*/
/*  width: 600;*/
width: 45%;
  margin: 1em;
  float: left;

}

div.aph_panel_dates {
/*  display: inline-block;*/
  width: 45%;
  margin: 1em;
  float: left;
  min-width: 260px;
}

table.aph_pagetitle {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

td.aph_pagetitle {
	font-weight: bold;
	vertical-align: middle;
	font-size: medium;
	width: 250px;
	padding-bottom: 3px;
}

td.aph_pageobject {
	font-weight: bold;
	vertical-align: middle;
	font-size: small;
	width: 250px;
}

table.aph_detail {
	width: 20%;
	border: 1px solid black;
	border-spacing: 0;
	border-collapse: collapse;
}

td.aph_detail_head {
	text-align: center;
	overflow: hidden;
	word-wrap: break-word;
	vertical-align: middle;
	text-decoration: underline;
	text-decoration-color: red;
	font-size: smaller;	
	padding: 2px;
}

td.aph_detail_data {
	text-align: center;
	overflow: hidden;
	word-wrap: break-word;
	vertical-align: middle;
	font-size: smaller;
	padding: 2px;
}

.aph_line_hdr {
    border: 1px groove #4413f3;
    margin: auto;
}

.aph_notice {
	padding-left: 10px;
	font-size: small;
}

table.aph_breadcrumb {
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
}

td.aph_breadcrumb {
	text-align: left;
	overflow: hidden;
	word-wrap: break-word;
	vertical-align: middle;
	font-size: smaller;
	padding: 2px;
	font-style: italic;
}

h2.fmt {
	padding-left: 15px;
}

/* end APH */

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

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

.error_label {
	color: red;
}

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

/* SW2020 this replaces the above - using an icon red dot for required fields  */
.label_required_img {  
    position: relative;  
    top: 5px;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

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

.input_text_wrap_textarea {
	float: left;
    margin-top: 10px;
   	width: 80%;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  background-color: #f9f5f5
}

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

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

.input_dropdown {
	float: left;
    margin-top: 10px;	
    margin-bottom: 1px;
   	/*width: 30%; */
    background-color: white;    
}

.message {
	margin-left: 15px;	
	margin-right: 15px;
}

.hint {
	float: left;
	margin-left: 10px;
    margin-top: 13px;	
   	width: 40%;
   	color: #5134F1;
   	font-style: italic;
   	font-size: smaller;
}

/* 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 #ccc;
}

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;
}

.button-table{
	background-color: #5134F1;
	border-color: #00008F;
}
.button-table:hover {
  background-color:rgba(255,204,0,0.8);
	border: 2px outset 6px groove #db2626;
}

div.translate {
	float:left;
    margin-top: 13px;
    margin-left: 5px;	
}

/* translate button */
input.translate {
	color: white;
	background: #5134F1;
	font-weight: bold;
	font-size: small;
     border-radius: 15px;
     border: 1px solid #999;
	 min-width: 20px;
}
input.translate:hover {
  background-color:rgba(255,204,0,0.8);
	border: 2px outset 6px groove #db2626;
	color: #5134F1;
}

input.translate_img {

}

.fileBox{ float:left; width: 50%;    margin-left: 15px;    margin-right: auto;    margin-top: 40px;    background: var(--brand-accent-hover);    padding: 20px;    border: 3px solid black; }

.audio_box {
  display: none;
  padding: 6px 12px;
 /* border: 1px solid #ccc; */
  border-top: none;
}

/* 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) {
  .label, .input_text, .input_textarea, .input_text_half, .input_number, .input_dropdown, .medium-editor-element {
    width: 100% !important;
    margin-top: 10px;
    padding-right: 10px;
    resize: none !important;
  }
  input[type=submit], input[type=button] {
    width: 100% !important;
	  margin-left: 0;
	  margin-top: 0px;
  }
  .left3QTRpanel {
	  width: 100%;
	  margin-left: 0;
	  min-width: 320px;
  }
  div.aph_panel_dates {
	  display: none;
  }  
 .fileBox{ float:left; width: 100%;    margin-left: auto;    margin-right: auto;    margin-top: 0;    background: #e54c4c;    border: 1px solid black; }

.leftPROMPTSpanel {
	min-height: 0;
}
}

@media screen and (max-width: 414px) {

.leftPROMPTSpanel {
	min-height: 0;
}

  div.translate {
	  float: none; 
	  width: 50%;
  }
  input.translate {
	  margin-top: 5px !important;  	  
  }

div.aph_panel_main {
/*  display: inline-block;*/
/*  width: 600;*/
width: auto;
  margin: 1em;
  float: left;

}

}