.formBlock {
    border-width: 1px 1px 1px 1px;
    border-spacing: 0px;
    border-style: solid;
    border-color: #ccc;
}
.formBlockCaption {
    height: 30px;
    background-color: #ccc;
    font-size: 12pt;
    font-weight: bold;
}
.formBlockCaption td {
    padding: 2px 10px 2px 10px;
}
.formBlockBody {
    background-color: #fff;
    padding: 10px;
}
.formBlockBody td {
    font-size: 10pt;
}
.formBlockFooter {
    height: 30px;
    background-color: #fff;
    border-color: #ccc;
    font-size: 8pt;
}
.formBlockFooter td {
    padding: 2px 2px 10px 2px;
}
.formBlockFooter td:first-child {
    padding-left: 12px;
}
.formBlockFooter td:last-child {
    padding-right: 12px;
}
.formBlockFormText {
}
.formBlockFormTextErr {
    background-color: #ff8888;
}
.formBlockFormTextArea {
}
.formBlockFormTextAreaErr {
    background-color: #ff8888;
}
.formBlockFormPassword {
}
.formBlockFormPasswordErr {
    background-color: #ff8888;
}
.formBlockFormSelect {
    padding: 3px 0; /* to match with the inputs */
}
.formBlockFormSelect[name="country"] {
    /* Some country names in the options are quite long. The largest option will force the select to have an implicit min-width which may cause it to overflow.
     * Setting only max-width on the select won't help because the min-width applies with higher priority. Solution is to set both width and max-width. */
    width: 268px;
    max-width: 100%;
}
.formBlockFormSelectErr {
    background-color: #ff8888;
}
.formBlockFormCheckBox {
}
.formBlockFormCheckBoxErr {
    background-color: #ff8888;
}
div.campaign-block {
  margin: 0 auto;
  width: 720px;
}
div.campaign-left-block {
  float:left;
  width: 355px;
  margin: 10px 5px 10px 0;
}
div.campaign-right-block {
  float:left;
  width: 355px;
  margin: 10px 0 10px 5px;
}
a.campaign-button {
  background-color: #CCCCCC;
  border: 2px outset #CCCCCC;
  display: block;
  padding: 2px;
  text-align: center;
  width: 80px;
}
a.campaign-button:visited, a.campaign-button:link {
  text-decoration:none;
  color: #000;
}
div.campaign-banner {
  margin: 0 0 10px 0;
}
th.version-header {
}

.dialog-link span.ui-icon {
		margin: 0 5px 0 0;
		position: absolute;
		left: .2em;
		top: 50%;
		margin-top: -8px;
	}
	.icons {
		margin: 0;
		padding: 0;
	}
	.icons li {
		margin: 2px;
		position: relative;
		padding: 4px 0;
		cursor: pointer;
		float: right;
		list-style: none;
	}
	.icons span.ui-icon {
		
		margin: 0 4px;
	}


.basic-modal-content {display:none;}

/* Overlay */
.simplemodal-overlay {background-color:#fff; cursor:crosshair;}

/* Container */
.simplemodal-container {overlaClose: true; height:250px; width:655px; color:#000; background-color:#fff; border:4px solid #444; padding:12px; }
.simplemodal-container .simplemodal-data {padding:8px;}
.simplemodal-container a {color:#ddd;}
.simplemodal-container a.modalCloseImg {background:url(./images/x.png) no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
.simplemodal-container h3 {color:#ededed;}

/*collapsible */
.collapsible,
.page_collapsible,
.accordion {
	margin: 0;
    padding:5px;
    height:20px;
    cursor:pointer;
 	border-top:#f0f0f0 0px solid;
    background: #acabc4;

	font-family: Arial, Helvetica, sans-serif;
    text-decoration:none;
    color: #000;
    font-size:1em;
}

/*
.collapsible,
.leases
.page_collapsible,
.accordion {
    height: auto;	
}
*/

.accordion-open,
.collapse-open {
	background:#c8d6f2;
	color: #000000;
}

.collapsible.group.collapse-open {
	background: #b5c0d7;
}

.license.container .collapsible.group.collapse-open {
	background: #c8d6f2;
}

.collapsible.member.collapse-open {
	background: #c8d6f2;
	color: #000;
	border-left: 1px solid #c8d6f2;
	border-right: 1px solid #c8d6f2;
}

.license.container .group.container .collapsible.member.collapse-open {
	background: #dde4f4;
	border-color: #dde4f4;
}

.collapsible.licensehead.collapse-open {
	background:#b5c0d7;
	color: #000;
	border-left: 1px solid #b5c0d7;
	border-right: 1px solid #b5c0d7;
}

.license-pool .collapsible.licensehead.collapse-open {
	background: #dde4f4;
}

.license-pool .collapsible.licensehead.collapse-open,
.license-pool .license-key div.collapse.container.license {
    border-color: #dde4f4;
}

.collapsible.resethead.collapse-open {
	background:#b5c0d7;
	color: #000;
	border-left: 1px solid #b5c0d7;
	border-right: 1px solid #b5c0d7;
}

.accordion-open span,
.collapse-open span {
	display:block;
	float:left;
	padding:8px;
}

.accordion-open span,
.collapse-open span {
	background:url(./images/close.png) center center no-repeat;
	margin-right: 5px;
	margin-top: 0px;
}

.accordion-close span,
.collapse-close span {
	display:block;
	float:left;
	background:url(./images/open.png) center center no-repeat;
	padding:8px;
	margin-right: 5px;
	margin-top: 0px;
}

div.collapse.content ul, div.content p {
	margin:0;
	padding:3px;
}

div.collapse.content ul li {
	list-style-position:inside;
	line-height:25px;
}

div.collapse.content ul li a {
	color:#555555;
}

div.collapse.container.license {
	background: #fffff;
	border: 3px solid #b5c0d7;
}

div.collapse.container {
	background: #fffff;
	width: auto;
}

div.collapse.container.member {
	background: #ffffff;
	border: 3px solid #c8d6f2;
}

.license.container .group.container div.collapse.container.member {
    border-color: #dde4f4;
}

div.collapse.content {
	width: auto;
	float: none;
	border: 0px none;
}

div.collapse.content.member {
	border-width: 0px 0px 0px;
}

h3.collapsible + div { padding: 5px; }

.basic-modal.unshare.ui-icon.ui-icon-trash{
	float:right;
}

.basic-modal.unshareLicense.ui-icon.ui-icon-trash{
	float:right;
}

#formFilter {
width:185px;
height:20px;
padding:0px 0px 0px 18px;
background-image:url('/doc/style/images/filter.png');
background-repeat:no-repeat;
background-position:1px 50%;
background-size:15px 15px;
float: right;
}

label.error {color:#ff0000;}

/* File sharing */
#formUploaded table {
   margin: 10px 0;
   border-collapse: separate;
   border-spacing: 10px;
}

#formUploaded th {
    text-align: right;
}

#formUploaded th:nth-child(1) { /* checkbox */
    width: 15px;
}

#formUploaded th:nth-child(2) { /* name */
    /* no width (use all the remaining space) */
    text-align: left;
}

@media (min-width: 480px) {
    #formUploaded th:nth-child(3) { /* size */
        width: 90px;
    }

    #formUploaded th:nth-child(4) { /* date */
        width: 150px;
    }

    #formUploaded th, #formUploaded td {
        padding: 0 5px;
    }

    #formUploaded td:first-child {
        padding-right: 0;
    }
}

@media (max-width: 479.9px) {
    /* switch to auto mode when the device is too narrow. */
    #formUploaded table {
        table-layout: auto;
        border-spacing: 5px;
    }

    #formUploaded th, #formUploaded td {
        padding: 0;
    }
}

/* login */
.row.login-forms {
    margin-right: 0px;
    margin-left: 0px;
}
.login-forms > div {
    margin: 15px 0;
}
@media (max-width: 767.9px) {
    .row.login-forms {
        margin-right: -10px;
        margin-left: -10px;
    }
    .login-forms > div {
        margin: 5px 0;
    }
    .login-forms .formBlockBody {
        height: auto;
    }
    .login-forms .formBlockFooter {
        height: 40px;
    }
}

/* styles for mobiles (license management pages) */
.license.table-container {
    overflow:auto;
}

.license.table-container table {
    table-layout:auto;
    width:100%;
}

table.license-pool.main, #resetTokenTable {
    table-layout:fixed;
}

.formBlockBody table td {
    padding: 5px 2px;
}

#formSVE .formBlockBody p {
    text-align: left;
}

.formBlockBody input[type="text"],
.formBlockBody input[type="password"],
.formBlockBody select {
    /* Make sure input and select use the same box-sizing. */
    box-sizing: border-box;
}

.formBlockFooter input[type="submit"] {
    max-width: 100%;
}

@media (max-width: 575.9px) {
    /* Adjust form display for mobile devices */
    table.formBlock, .formBlockBody table {
        /* Have a fixed layout for mobile -> this will cause the two columns to be 50% */
        table-layout: fixed;
        width: 100%;
    }

    .formBlockBody table td {
        font-size: 8.5pt;
    }

    .formBlockBody table td:first-child {
        white-space: normal;
    }

    .formBlockBody input[type="text"],
    .formBlockBody input[type="password"],
    .formBlockBody select {
        /* This will let the input text field narrow down on small devices. To make it perfect, we would need to rewrite the whole form with a bootstrap grid instead of using table. */
        width: 100%;
    }

    .license-pool h3, .license-key h3, .license h3 {
        padding-right: 24px; /* The text is being pushed to the right by the arrow icon. Compensate with a padding. */
        white-space:nowrap;
        font-size:10px;
    }

    .license-pool h3 div:last-child {
        margin-right:-19px; /* If a div is included in the title (like to show the number of licenses, then compensate the padding-right added above). */
    }

    .license-pool h3:after {
        /* clearfix for h3 when the number of licenses can't show on the same line (otherwise the frame below it would be affected). */
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }

    .accordion-close span, .collapse-close span,
    .accordion-open span, .collapse-open span {
        background-size:14px 14px !important;
        padding:7px !important;
    }

    .collapsible, .page_collapsible, .accordion {
        min-height:14px;
        height:auto !important; /* Let it grow if the h3 has to display on multiple lines. */
    }

    .content input {
        font-size:11px;
    }

    .content .formTable input {
        font-size:9px;
    }

    .japanese .content .formTableRowHead {
        white-space:nowrap;
    }

    form[name="mainForm"]:after {
        /* clearfix for the dev licenses page. */
        content: "";
        clear: both;
        display: block;
        height: 0;
    }
}

@media (max-width: 409.9px) {
    .formBlockBody {
        padding-left: 5px;
        padding-right: 5px;
    }

    .formBlockFooter td:first-child {
        padding-left: 7px;
    }
    .formBlockFooter td:last-child {
        padding-right: 7px;
    }
}