/*
	================================
	Custom checkbox and redio
	================================
	Auther: warakorn Kidkumnuan
	Organization: ITSC, Chiang Mai University
	Use: FontAwsome

	For checkboxList use like
	<div class="checkbox">
		<asp:CheckBoxList ID="cblMycheckbox" runat="server">
			<asp:ListItem>Checkbox Item 1</asp:ListItem>
			<asp:ListItem>Checkbox Item 1</asp:ListItem>
			<asp:ListItem>Checkbox Item 1</asp:ListItem>
		</asp:CheckBoxList>
	</div>

	For Radiolist use like
	 <div class="radiostyle">
		<asp:RadioButtonList ID="rblQ3UseComputerOS" runat="server">
			<asp:ListItem>Option 1</asp:ListItem>
			<asp:ListItem>Option 2</asp:ListItem>
			<asp:ListItem>Option 3</asp:ListItem>
		</asp:RadioButtonList>
	</div>

*/
/*@font-face {
	font-family: "Th SarabunPSK";
	src: url('../fonts/THSarabun.ttf');
}*/
.checkbox {
    padding-left: 20px;
}

    .checkbox label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
        padding-right: 15px;
        padding-top: 8px;
    }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            margin-top: 2px;
            border: 1px solid #cccccc;
            border-radius: 3px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .checkbox label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -23px;
            padding-left: 4px;
            padding-top: 6px;
            font-size: 11px;
            color: #555555;
        }

    .checkbox input[type="checkbox"] {
        opacity: 0;
        z-index: 1;
    }

        .checkbox input[type="checkbox"]:checked + label::after {
            font-family: "FontAwesome";
            content: "\f00c";
            font-size: medium;
        }

.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
}

.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff;
}

.radiostyle {
    height: auto;
    padding-left: 20px;
}

    .radiostyle label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-left: 5px;
    }

        .radiostyle label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            left: 0;
            margin-left: -20px;
            margin-top: 5px;
            border: 1px solid #cccccc;
            border-radius: 10px;
            background-color: #fff;
            -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
        }

        .radiostyle label::after {
            display: inline-block;
            position: absolute;
            width: 16px;
            height: 16px;
            left: 0;
            top: 0;
            margin-left: -22px;
            margin-top: -2px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

    .radiostyle input[type="radio"] {
        opacity: 0;
        z-index: 1;
    }

        .radiostyle input[type="radio"]:checked + label::after {
            font-family: "FontAwesome";
            content: "\f111";
            font-size: larger;
        }

.content-header-space {
    margin-top: 10px;
}

.footer-space {
    margin-top: 120px;
}

.form-control-label {
    margin-top: 7px;
}

/*******************
Footer 1
*******************/
.footer1 .f1-middle {
    padding: 40px 0;
}

.footer1 .f1-bottom-bar {
    padding: 20px 0;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
}

/*.btn-warning,
.btn-warning.disabled {
    background: #feecae;
    color: #ffc107;
    border: 1px solid #feecae;
}*/
.badge {
    padding-right: 1.2em;
    padding-left: 1.2em;
    padding-top: 0.4em;
    padding-bottom: 0.4em;
}

/*.badge-success {
    color: #6ed79e;
    background-color: #e8fff3;
}

.badge-danger {
    color: #f3567d;
    background-color: #fff5f8;
}*/