/*
@title EnhancedCCForms
@author [[User:GreenWithin]]
@intro Making the new CC forms look more like actual forms
@changes Removes unnecessary borders, aligns items accordingly (titles to the left and input text to the right), and emphasizes disabled options (now with icons)
*/

.fandomCCForm .formSection {
	border: none;
	background-color: rgba(var(--theme-border-color--rgb),0.35) !important;
}

.formSection textarea {
	border: none;
}

.formSection .sectionHeader {
	font-variant: small-caps;
	background-image: none;
    border-bottom: .08rem solid var(--theme-border-color);
    text-align: left;
    width: 95%;
	font-size: 90%;
}

.formSection .sectionHeaderOptional {
    margin: 0 10px 0 12px;
    font-size: 10px;
    color: brown !important;
    opacity: 60%
}

.formSection input, .formSection .formInput, .formSection select {
	display: flex;
    align-content: stretch;
	border-bottom: none;
}

.formSection input:disabled {
    color: brown !important;
	border-bottom: 1px dotted brown;
    border-radius: 0;
}

.formSection .formInput:not(:disabled) {
	border: solid 1px var(--theme-border-color);
	border-radius: 3px;
	padding: 4.42px;
}

.formSection {
    display: flex;
}

.sectionHeaderWrapper {
    width: 60%;
}

.sectionContent {
    width: 40%;
    align-self: center;
}

.sectionContent label {
    font-size: 90%;
    opacity: 80%;
}

.sectionContent label[for="numDays"], .sectionContent label[for="numAdmins"] {
    color: brown;
    opacity: unset;
}

.sectionContent label:before {
    font-size: 80%;
    font-family: 'Fandom-Icons';
    font-style: normal;
}

.sectionContent label[for="adoptionUrl"]:before, .sectionContent label[for="permissionstype"]:before, .sectionContent label[for="communityvote"]:before, .sectionContent label[for="comment"]:before {
    content: 'pencil ';
}

.sectionContent label[for="numDays"]:before, .sectionContent label[for="numAdmins"]:before {
    content: 'error ';
}

/** Light theme selectors are great, but not this time **/
.theme-fandomdesktop-light .formSection input:disabled {
    color: brown !important;
}