a.downloadlink  {
    color: #ff9800;
    text-decoration: none;
    background-color: transparent;
}

    a.downloadlink:hover {
        color: #bf7302;
        text-decoration: none;
        background-color: transparent;
    }

.btn-org {
    background-color: hsl(38, 100%, 50%);
    color: hsl(0, 0%, 100%);
}
.btn-save {
    background-color: #0081ff;
    color: #fff;
}

.btn-group-sm > .btn, .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    line-height: 1.5;
    border-radius: 0.2rem;
}

.btn-group-lg > .btn, .btn-lg {
    cursor: pointer;
    min-width: 130px;
    font: 600 1.2rem/1.5 "Source Sans Pro", sans-serif;
    margin: 0 5px;
}

.addbtn {
    margin: 5px 0;
    padding: 0;
}

.addbtn_uploaded {
    display: none;
}

input[type=text], select, textarea {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    font-weight: normal;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
}

label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

input.inline {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
}

.PostBackButtonStyle {
    color: #fff;
    cursor: pointer;
    display: inline-block;
    position: relative;
    background-color: #d9534f;
    border: none;
    border-radius: 3px;
    box-shadow: inset 0px 1px 0px rgba(255,255,255, .8), 0px 1px 3px rgba(0,0,0, .1);
    font-family: '微軟正黑體',"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
    padding: 5px 6px;
    margin-right: 3px;
}

    .PostBackButtonStyle:hover {
        background-color: #dff4ff;
        color: #336699;
    }


.form-group.required .control-label:after {
    color: #d00;
    content: "*";
    padding-left: 5px;
}

.control-label {
    font-size: 16px;
}

.EditFormLabel {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 16px;
    font-weight: 700;
}

.RequiredField:after {
    content: '*';
    color: #f00;
    padding-left: 2px;
    margin-top: 5px;
}

.FormGroup .InputArea {
    margin-bottom: 10px;
}


.custom-control-label {
    font-weight: normal;
}

/* ON/OFF Switch 01 */
.onoffswitch {
    position: relative;
    width: 80px;
    display: inline-block;
    font-size: 14px;
}

    .onoffswitch .onoffswitch-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border: 1px solid hsl(0, 0%, 90%);
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        margin: 0;
    }

    .onoffswitch .onoffswitch-inner {
        width: 200%;
        margin-left: -100%;
        -webkit-transition: margin 0.15s ease-in-out;
        -o-transition: margin 0.15s ease-in-out;
        -moz-transition: margin 0.15s ease-in-out;
        transition: margin 0.15s ease-in-out;
    }

        .onoffswitch .onoffswitch-inner:before,
        .onoffswitch .onoffswitch-inner:after {
            float: left;
            width: 50%;
            height: 24px;
            padding: 0;
            line-height: 24px;
            font-size: 86%;
            color: hsl(0, 0%, 100%);
            font-weight: normal;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .onoffswitch .onoffswitch-inner:before {
            content: "Enable";
            padding-left: 10px;
            background-color: hsl(38, 100%, 50%);
            color: hsl(0, 0%, 100%);
        }

        .onoffswitch .onoffswitch-inner:after {
            content: "Disable";
            padding-right: 10px;
            background-color: hsl(0, 0%, 98%);
            color: hsl(0, 0%, 24%);
            text-align: right;
        }

    .onoffswitch .onoffswitch-switch {
        width: 22px;
        height: 22px;
        margin: 0;
        background: hsl(0, 0%, 100%);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        position: absolute;
        top: 2px;
        bottom: 0;
        right: 58px;
        -webkit-transition: right 0.15s ease-in-out;
        -o-transition: right 0.15s ease-in-out;
        -moz-transition: right 0.15s ease-in-out;
        transition: right 0.15s ease-in-out;
    }

.toggle-group {
    position: relative;
    height: 27px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    top: 50%;
    left: 0px;
    margin-top: 5px;
}

    .toggle-group input[type=checkbox] {
        position: absolute;
        left: 10px;
    }

        .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-inner {
            margin-left: 0;
        }

        .toggle-group input[type=checkbox]:checked ~ .onoffswitch .onoffswitch-label .onoffswitch-switch {
            right: 1px;
            box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
        }

        .toggle-group input[type=checkbox]:focus ~ .onoffswitch {
            outline: thin dotted #333;
            outline: 0;
        }

    .toggle-group label {
        position: absolute;
        cursor: pointer;
        padding-left: 65px;
        display: inline-block;
        text-align: left;
        line-height: 24px;
        width: 100%;
        z-index: 1;
        height: 24px;
        font-weight: 200;
    }

/*On/Off Switch 02*/
.switch label {
    cursor: pointer;
    margin-top: 10px;
    font-weight: normal;
}

    .switch label input[type="checkbox"] {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .switch label .lever {
        position: relative;
        display: inline-block;
        margin: 0 .825rem;
        margin-right: .825rem;
        vertical-align: middle;
        content: "";
        background-color: #818181;
        border-radius: .9375rem;
        width: 2.5rem;
        height: .9375rem;
        -webkit-transition: background 0.3s ease;
        transition: background 0.3s ease;
    }

        .switch label .lever:after {
            position: absolute;
            top: -.1875rem;
            left: -.3125rem;
            display: inline-block;
            content: "";
            background-color: #f1f1f1;
            border-radius: 1.3125rem;
            -webkit-box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0,0,0,0.4);
            box-shadow: 0 0.0625rem 0.1875rem 0.0625rem rgba(0,0,0,0.4);
            width: 1.3125rem;
            height: 1.3125rem;
            -webkit-transition: left 0.3s ease,background 0.3s ease,-webkit-box-shadow 1s ease;
            transition: left 0.3s ease,background 0.3s ease,-webkit-box-shadow 1s ease;
            transition: left 0.3s ease,background 0.3s ease,box-shadow 1s ease;
            transition: left 0.3s ease,background 0.3s ease,box-shadow 1s ease,-webkit-box-shadow 1s ease;
        }

    .switch label input[type="checkbox"]:checked + .lever {
        background-color: #e2dccf;
    }

        .switch label input[type="checkbox"]:checked + .lever:after {
            left: 1.5rem;
            background-color: #f79216;
        }

.clear:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

.FormInputWrap {
    margin: 20px 0;
    padding: 10px 40px;
    background-color: #f8f8f8;
}

.img_inputbox {
    margin: 0;
    border: 2px dashed #ffd800;
    background-color: #efefef;
    padding: 10px;
    width: 478px;
    height: 250px;
    vertical-align: middle;
}

    .img_inputbox img {
        max-width: 100%;
        max-height: 100%;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
    }

.buttons {
    margin-top: 220px;
}

.selected-category {
    margin-left: 10px;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #fff;
}

@media (max-width:480px) {
    .FormInputWrap {
        padding: 15px;
        background-color: #f7f7f7;
    }

    .img_inputbox {
        margin: 0;
        border: 2px dashed #ffd800;
        background-color: #efefef;
        padding: 10px;
        width: 100%;
        height: 250px;
        vertical-align: middle;
    }

    .comp-logo img, .prd-img img {
        max-width: 100%;
    }

    .buttons {
        margin-top: 20px;
    }
}




/*Radio Button*/

.radio {
    margin-left: 3%;
}

    .radio label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-top: 3px;
        padding-left: 10px;
        margin-right: 15px;
        font-size: 0.85rem;
        line-height: 1.5;
    }

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

        .radio label::after {
            display: inline-block;
            position: absolute;
            content: " ";
            width: 11px;
            height: 11px;
            left: 3px;
            top: 8px;
            margin-left: -15px;
            border-radius: 50%;
            background-color: #555555;
            -webkit-transform: scale(0, 0);
            -ms-transform: scale(0, 0);
            -o-transform: scale(0, 0);
            transform: scale(0, 0);
            -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
            transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33);
        }

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

        .radio input[type="radio"]:focus + label::before {
            outline: -webkit-focus-ring-color auto thin;
            outline: revert;
        }

        .radio input[type="radio"]:checked + label::after {
            -webkit-transform: scale(1, 1);
            -ms-transform: scale(1, 1);
            -o-transform: scale(1, 1);
            transform: scale(1, 1);
        }

        .radio input[type="radio"]:disabled + label {
            opacity: 0.65;
        }

            .radio input[type="radio"]:disabled + label::before {
                cursor: not-allowed;
            }


.radio-warning input[type="radio"] + label::after {
    background-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::before {
    border-color: #f0ad4e;
}

.radio-warning input[type="radio"]:checked + label::after {
    background-color: #f0ad4e;
}


/*Checkbox*/

.checkbox {
    margin-left: 3%;
}

    .checkbox label:not(.form-check-label):not(.custom-file-label) {
        font-weight: 500;
    }

    .checkbox label {
        display: inline-block;
        vertical-align: middle;
        position: relative;
        padding-top: 3px;
        padding-left: 10px;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.5;
    }

        .checkbox label::before {
            content: "";
            display: inline-block;
            position: absolute;
            width: 17px;
            height: 17px;
            top: 5px;
            left: 5px;
            margin-top: 0px;
            margin-left: -20px;
            border: 1px solid #aaa;
            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;
            margin-top: 4px;
            margin-left: -15px;
            padding-left: 3px;
            padding-top: 1px;
            font-size: 11px;
            color: #555555;
        }

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


        .checkbox input[type="checkbox"]:focus + label::before {
            outline: thin dotted;
            outline: 5px auto -webkit-focus-ring-color;
            outline-offset: -2px;
        }

        .checkbox input[type="checkbox"]:checked + label::after {
            content: "\f00c";
            font-family: 'Font Awesome\ 5 Free';
            font-weight: 900;
            top: -1px;
        }


        .checkbox input[type="checkbox"]:disabled + label {
            opacity: 0.65;
        }

            .checkbox input[type="checkbox"]:disabled + label::before {
                background-color: #eeeeee;
                cursor: not-allowed;
            }

.checkbox-warning input[type="checkbox"]:checked + label::before, .checkbox-warning input[type="radio"]:checked + label::before {
    background-color: hsl(38, 100%, 50%);
    border-color: hsl(38, 100%, 50%);
    outline: 0;
}

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


.form-group .label.RequiredField:after {
    content: '*';
    color: #f00;
    padding-left: 2px;
    margin-top: 5px;
}