/*~~~~~~~~~~~~~~~~~~~~ General ~~~~~~~~~~~~~~~~~~~~~~*/
.four-column {
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3;
}
.two-column {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
.four-column ul {
  margin: 0;
}
.four-column li {
  break-inside: avoid-column;
}
table, td, th {
  text-align: left !important;
  vertical-align: top !important;
}
.terms-table {
  width: 100%;
}
.terms-table th, .terms-table td {
  text-align: center !important;
}
.pro-ctcae-release-note-list {
  list-style-type: none;
  padding-left: 0;
}
.pro-ctcae-release-note-list li:nth-of-type(even) {
  background-color: #eee;
}

@media (min-width: 992px) {
	.four-column.three-column {-webkit-column-count: 3;  -moz-column-count: 3; column-count: 3;}
	.four-column.two-column {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
}
@media (min-width: 768px) and (max-width: 991px) {
	.four-column.three-column {-webkit-column-count: 2;  -moz-column-count: 2; column-count: 2;}
	.four-column.two-column {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}

/* To provide verisimilitude with the way responses are laid out in the actual instrument: */
.pro-ctcae_item_list {
  list-style-type: "Ο ";
}



/*~~~~~~~~~~~~~~~~~~~~ Registration Form ~~~~~~~~~~~~~~~~~~~~~~*/
.terms_of_use {
  background: #ECECEC;
  border: 1px solid #cccccc;
  width: 97.5%;
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 1em;
}
.terms_of_use .white-box {
  padding: 10px;
  border: 1px solid #cccccc;
  background: #fff;
  margin: 0;
}
a.terms_button,
input[type="submit"],
button.builder_button {
  text-align: center;
  text-decoration: none;
  padding: 0.5em 1em;
  margin: 0 .5em 0 0;
  border: none;
  background-color: #dbebf8;
  background-image: linear-gradient(to top, #dbebf8, #f6fbff, #dbebf8);
  color: #2c4c73;
  font-weight: bold;
  border: 1px solid #cccccc;
}
a.terms_button:hover,
input[type="submit"]:hover,
button.builder_button:hover {
  color: #fff;
  background-color: #2C4C73;
  background-image: linear-gradient(to bottom, #333333, #2c4c73);
  text-decoration: none;
}
#reg_form {
  margin-top: 50px;
}
#reg_form input {margin-right: .3rem;}
#reg_form label {display: inline;}
#reg_form form {
  background: #ECECEC;
  border: 1px solid #cccccc;
  padding: 10px;
}
#reg_form form p {
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}
#reg_form form p label {
  max-width: 35%;
  display: inline-block;
  border-right: 1px solid #cccccc;
  padding-right: 2%;
}
#reg_form form p input,
#reg_form form p textarea {
  border: none !important;
  width: 58%;
  box-shadow: none !important;
  vertical-align: top;
  background: none;
}
fieldset {
  margin-bottom: 1em;
  background: #ffffff;
  border: 1px solid #cccccc;
  padding: 10px;
}
fieldset legend {
  background: #5a5a5a;
  color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 2px 10px;
}
.itemlist {
  -webkit-columns: 200px 3;
  -moz-columns: 200px 3;
  columns: 200px 3;
  margin-top: 1em;
  margin-bottom: 1em;
}
.itemlist .item-groups {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
.itemlist .item-groups.first h3 {
  margin-top: 0;
}
.itemlist .item-groups h3 {
  margin-top: 0.75em;
}
.note {
  font-style: italic;
}
.selection:hover, input[type="radio"]:checked + label, input[type="checkbox"]:checked + label {
  color: #0070C8;
}
legend {
  font-weight: bold;
}

/* Some language names are long; this rule prevents any one language name
from continuing into the next column. */
#pro-ctcae-lang-choices .selection {
  display: inline-block;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -ms-column-break-inside: avoid;
  column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}



/*~~~~~~~~~~~~~~~~~~~~ Builder Form ~~~~~~~~~~~~~~~~~~~~~~*/
.download_buttons {
  line-height: 300%;
}

/* The overlay that's shown when the form is submitted */
#processing_overlay {
  background: #fff;
  padding: 1%;
  border: 10px solid #94C4DA;
  display: none;  /* hidden at first; will be displayed via JS later */
}

#processing_overlay img {
  vertical-align: bottom;
}


@media (max-width:600px) {
/*~~~~~ General~~~~~~*/
.four-column {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
}
}
@media (max-width:450px) {
a.terms_button {
  display: block;
  width: 93%;
  width: calc(100% - 2em);
  margin: 0;
  margin-bottom: 10px;
}

#reg_form form p label {
  max-width: none;
  width: 100%;
  display: block;
  border-right: 0;
  padding-right: 0;
}
#reg_form form p input {
  width: 96%;
  width: calc(100% - 12px);
  border-top: 1px solid #cccccc !important;
  margin-top: 10px;
}
}
@media (max-width:380px) {
/*~~~~~ General~~~~~~*/
.four-column {
  -webkit-column-count: 1;
  -moz-column-count: 1;
  column-count: 1;
}
}


/*************PED-PRO**************/
.version label {margin-right: 1rem;}
.version { padding:1rem 1rem .5rem 1rem; background: #fff;
    border: 1px solid #cccccc; border-bottom: none;}
.download_buttons { padding: .5rem 1rem 1rem 1rem;background: #fff;
    border: 1px solid #cccccc;border-top:none;}

@media (max-width: 575px) {
	.two-column {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}
}

/*~~~~~~~~~~~~~~~~~~~~ FAQ ~~~~~~~~~~~~~~~~~~~~~~*/
.tog-content {
  display: flow-root;
}

.sharebox {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 0.2em;
  float: right;
  margin-left: 0.75em;
  padding: 0.75em;
}

.sharebox svg {
  margin-right: 0.25em;
}


/* ~~~~~~~~~~~~ Specialized White Icon Cards ~~~~~~~~~~~~~ */
.pro-ctcaeOverride .card-head img {background-color: #1f496f;}
.pro-ctcaeOverride .card-white .card-title {color: #333;}
.pro-ctcaeOverride .card-white:hover, .pro-ctcaeOverride .card-white:focus {box-shadow: 0 3px 6px rgba(0,85,94,.5);}
.pro-ctcaeOverride .quick-guide {position: relative;}
.pro-ctcaeOverride .quick-guide .docinfo {font-size: 85%; position: absolute; right: 1rem; bottom: 1.5rem;}

@media (min-width: 768px) {
	.pro-ctcaeOverride .quick-guide .docinfo {bottom: 3rem; right: 3rem;}
}
@media (min-width: 951px) and (max-width: 991px) {
	.pro-ctcaeOverride .quick-guide .docinfo {bottom: 2.25rem; right: 2.25rem;}
}


/**************************************
Revisions History
**************************************/
.reviseWrap { display: flex; background: #f6f6f6; padding: 1.5rem; margin: 0 0 1rem; border-radius: 3px; border: 1px solid #ccc; }
.reviseWrap .date-type {display: flex; flex-direction: column; justify-content:space-between; padding: .25rem .5rem; }
.reviseWrap.row {font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";}
.reviseWrap h2 { display: flex; flex-direction: column; align-self: flex-start; flex: 0 0 4rem; text-align: center; font-weight: 400; font-size: .875rem; line-height: 1.1; background: #fff; border: 1px solid #ddd; width: 100px; border-top: 5px solid #1f496f; margin-bottom: 1rem; }
.reviseWrap .date-type img {width: 100px}
.reviseWrap h2 abbr { font-variant: all-small-caps; font-size: 1.25rem; text-decoration: none; }
.reviseWrap h2 strong { font-size: 2rem; font-weight: 600; }
.content h3 {margin: 3rem auto 1rem; position: relative; text-align: center; width: 100%; z-index: 1;}
.content h3:first-child {margin-top: 0;}
.content h3 span {background: #f6f6f6; padding: 0 0.5rem; display: inline-block;}
.content h3::after {content: ''; display: block; background-color: #ccc; width: 100%; height: 2px; position: absolute; left: 0; top: 0.75rem; z-index: -1;}
.content .lang {font-size: .9rem;}
.summary { padding-left: 3rem; margin: 0; }
.summary > li { margin-bottom: 1rem; }
.summary *:last-child { margin-bottom: 0; padding-bottom: 0; }
.table-languages {background: #fff; margin-top: 2rem; border: 1px solid #ccc;}
.table-languages th {border-bottom: 1px solid #ccc; border-top: none;}
.table-languages th, .table-languages td {width: 50%;}
.table-languages th:first-child, .table-languages td:first-child {border-right: 1px solid #ccc;}

@media screen and (max-width: 991px){
	.reviseWrap { display: block; padding: 1rem; position: relative; margin-top: 5rem; }
	.reviseWrap .content {margin-top: 2.5rem;}
	.reviseWrap .date-type {flex-direction: row; width: 100%; position: absolute; right: 0; left: 0; top: -2.5rem; margin: 0;}
	.reviseWrap .date-type img {width: 5rem; height: 5rem; background: #fff; padding: 0.25rem; border: 5px solid #008391; box-shadow: 0 0 8px rgb(0 0 0 / 20%); border-radius: 50%;}
	.reviseWrap h2 {flex: 0 0 5rem; margin-bottom: 0;}
	.summary { border-left: none; padding-left: 2rem; }
}

#relnote-filter-controls {background: #f7f8f9; padding: 1rem; border: 1px solid #ccc; border-radius: 0.25rem; margin: 0 0 2rem; width: 100%;}
.relnote-filter-ctrl {display: inline-block; white-space: nowrap;}
.relnote-filter-ctrl:first-child {display: block;}
.relnote-filter-ctrl label {font-weight: bold;}
#relnote-nomatches {display: none; font-style: italic;}

@media (max-width: 768px) {
	#relnote-filter-controls {margin: 2rem auto;}
}
@media (min-width: 576px) and (max-width: 640px) {
	.relnote-filter-ctrl {padding: 0 0.5rem;}
}

/***********MODAL OVERLAY*************/
.ui-widget-overlay {
  background: #000 none repeat scroll 0 0;
  opacity: 0.7;
}
@media (min-width: 767px) {
  .ui-dialog.ui-corner-all.ui-widget.ui-widget-content.ui-front.ui-draggable.ui-resizable.ui-dialog-buttons {width: 50% !important; left: 25% !important;}
}