@font-face {
    font-family: 'Franklin Gothic Book';
    font-style: normal;
    font-weight: 400;
}

* {
    font-family: 'Franklin Gothic Book';
    margin: 0;
}

.font-size-14{
    font-size: 14px;
}

.margin-0-v {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
}

.margin-0-bottom {
    margin-bottom: 0 !important;
}

.margin-0-top {
    margin-top: 0 !important;
}

#GadgetMainContainer {
    width: 100%;
}

#QCDonationGadget {
    padding: 0 7px;
    direction: ltr;
    max-width: 100%;
    height: 320px;
    max-height: 439px;
    background: #ffffff;
    color: #3c3c3c;
}

.QCHeader {
    height: 24px;
    background-color: #20598e;
    /*-webkit-border-radius: 5px 5px 0 0;
    -moz-box-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;*/
    width: 320px;
    padding: 10px 20px;
}

    .QCHeader .QCLogo {
        display: inline-block;
        float: right;
    }

        .QCHeader .QCLogo img, .QCHeader .QCLogo p {
            float: right;
            display: inline-block;
            color: #fff;
            line-height: 24px;
            margin-top: 0;
        }

.QCLogo img {
    margin-left: 10px;
}

.QCHeader button.MinimizeBtn {
    float: left;
    background-color: transparent;
    -webkit-border: none;
    -moz-box-border: none;
    border: none;
    cursor: pointer;
    outline: none;
    margin-top: 4px;
}

.Content {
    margin: 0;
}

.float-right {
    float: left;
}

.float-left {
    float: right;
}

.Bold {
    font-weight: bold !important;
}

.RedColor {
    color: #ff345b !important;
}

.GreenColor {
    color: #20598e!important;
}

.col-xs-12 {
    width: 100%;
    position: relative;
    min-height: 1px;
    float: left;
}

.divider {
    border-bottom: 1px solid #dedede;
    margin: 10px 0;
}

.DropDown {
    width: 100%;
    margin: 15px 0;
}

    .DropDown select {
        width: 100%;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background-image: url(/Content/images/dropdownArrow.png);
        background-position: 97%;
        background-repeat: no-repeat;
        cursor: pointer;
        /*border-radius: 5px;*/
        height: 40px;
        line-height: 24px;
        outline: none;
        padding-left: 15px;
        margin-bottom: 12px;
    }
.DonationValuesContainer input {
    width:60px;
    height: 40px;
    padding: 0 10px;
    -webkit-border: 1px solid #e0e0e0;
    -moz-box-border: 1px solid #e0e0e0;
    border: 1px solid #e0e0e0;
}

.DonationValuesContainer a, .DonationValuesContainer input {
    display: inline-block;
    /*-webkit-border-radius: 5px;
    -moz-box-border-radius: 5px;
    border-radius: 5px;*/
}

    .DonationValuesContainer a.DonationValues {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: transparent;
        text-decoration: none;
        color: #20598e;
        text-align: center;
        line-height: 40px;
        margin: 0 0 0 0px;
        font-family: 'Franklin Gothic Book'; 
        cursor: pointer;
        font-size: 15px;
    }



.DonationOptions {
    margin-top: 20px;
}

    .DonationOptions label {
        display: inline-block;
        margin-right: 30px;
        cursor: pointer;
        margin-left: 0px;
    }

        .DonationOptions label input {
            visibility: hidden;
        }

.DonationAction button {
    width: 100%;
    background-color: #FF345B;
    /*-webkit-border-radius: 5px;
    -moz-box-border-radius: 5px;
    border-radius: 5px;*/
    -webkit-border: none;
    -moz-box-border: none;
    border: none;
    color: #fff;
    padding: 8px 13px;
    cursor: pointer;
}

.DonationAction a {
    margin: 15px 0;
    width: 100%;
    background-color: #FF345B;
    /*-webkit-border-radius: 5px;
    -moz-box-border-radius: 5px;
    border-radius: 5px;*/
    -webkit-border: 1px solid #FF345B;
    -moz-box-border: 1px solid #FF345B;
    border: 1px solid #FF345B;
    color: #fff;
    padding: 15px;
    cursor: pointer;
}

a.QCLink {
    display: block;
    text-align: center;
    line-height: 30px;
    font-family: 'Franklin Gothic Book';
    text-decoration: none;
    color: #3c3c3c;
}

    a.QCLink:hover {
        color: #FF345B;
    }



.pureCSS input[type=checkbox]:not(old), .pureCSS input[type=radio ]:not(old) {
    width: 0;
    margin: 0;
    padding: 0;
    font-size: 1em;
    opacity: 0;
}

    .pureCSS input[type=checkbox]:not(old) + label, .pureCSS input[type=radio ]:not(old) + label {
        display: inline-block;
        line-height: 1.5em;
    }

        .pureCSS input[type=checkbox]:not(old) + label > span, .pureCSS input[type=radio ]:not(old) + label > span {
            display: inline-block;
            width: 0.875em;
            height: 0.875em;
            margin: 0.2em 0 0.25em 0.5em;
            border: 0.1em solid rgb(192,192,192);
            /*border-radius: 0.5em;*/
            background: #fff;
            background-color: #fff;
            background-color: #fff;
            background-color: #fff;
            background-color: #fff;
            background-color: #fff;
            vertical-align: bottom;
        }

    .pureCSS input[type=checkbox]:not(old):checked + label > span, .pureCSS input[type=radio ]:not(old):checked + label > span {
        border: 0.1em solid rgb(6,173,187);
    }

        .pureCSS input[type=radio]:not(old):checked + label > span > span {
            display: block;
            width: 0.5em;
            height: 0.5em;
            margin: 0.125em;
            border: 0.0625em solid rgb(115,153,77);
            /*border-radius: 0.5em;*/
            background: rgb(6,173,187);
            background-color: rgb(6,173,187);
            background-color: rgb(6,173,187);
            background-color: rgb(6,173,187);
            background-color: rgb(6,173,187);
            background-color: rgb(6,173,187);
        }

.Options {
    display: inline-block;
}

.margin-10-v {
    margin-bottom: 10px;
    margin-top: 10px;
}

.margin-10-top {
    margin-bottom: 0;
    margin-top: 10px;
}

.margin-5-v {
    margin-bottom: 5px;
    margin-top: 5px;
}

.padding-10-top {
    padding-top: 10px;
}
/**************************Mo7amed*********************************/
*:focus {
    outline: none;
}

*::-moz-focus-inner {
    border: none;
}

.color-white {
    color: #ffffff;
}

.maxWidth {
    max-width: 60%;
}

.maxWidth-ImageBanner {
    max-width: 100%;
}

.blockBanner {
    position: relative;
    margin-top: 15px;
    height: 107px;
    overflow:hidden;
}

.bgtransperant {
    background-color: rgba(0, 0, 0, 0.53);
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 9999;
}

    .bgtransperant .titelbannerDonation {
        position: relative;
        margin-top: 10px;
        color: #fff;
        z-index: 9999;
        text-align: center;
    }

    .bgtransperant .textDonation {
        color: #fff;
        max-width: 100%;
        text-align: center;
        font-size: 12px;
        overflow: hidden;
        padding: 0 15px;
    }

    .bgtransperant .DonationAction {
        text-align: center;
        margin: 10px auto;
        display: block;
        width: 50%;
    }

        .bgtransperant .DonationAction .buttonBorder {
            padding: 5px 30px;
            color: #fff;
            border: 1px solid #fff;
        }

.butWidth {
    float: right;
    width: 40%;
}

.bgGreen {
    background-color: #f6f6f6;
}

    .bgGreen .titelBlock {
        color: #009da5;
        font-size: 18px;
        margin: 0 20px;
    }

    .bgGreen .textDonation {
        font-size: 14px;
        max-width: 165px;
        margin: 0 20px;
        padding-bottom: 15px;
    }

.DonationAction .buttonBorder {
    /* margin: 15px 0; */
    width: 90%;
    background: rgba(255, 255, 255, 0);
    /*-webkit-border-radius: 5px;
    -moz-box-border-radius: 5px;
    border-radius: 5px;*/
    -webkit-border: 1px solid #FF345B;
    -moz-box-border: 1px solid #FF345B;
    border: 1px solid #FF345B;
    color: #FF345B;
    padding: 15px;
    cursor: pointer;
    text-decoration: none;
}


/*PROJECTS*/
.ProjectsBanner {
    height: 130px;
    max-height: 126px;
    overflow:hidden;
}

.BarAmount {
    border-top: 1px solid #b4b4b4;
    background-color: #fff;
    margin-top: 25px;
    height: 80px;
}

.slider-horizontal {
    height: 10px;
}

    .slider-horizontal .slider-track {
        height: 8px;
    }

    .slider-horizontal .slider-selection {
        height: 100%;
        top: 0;
        bottom: 0;
        background: #20598e;
    }

.slider-track {
    position: absolute;
    background: #e0e0e0;
}
.border-radius-right {
    border-radius: 4px 0px 0px 4px !important;
}


.border-radius-left {
    border-radius: 0px 4px 4px 0px !important;
}

input, select {
    border: 1px solid #e0e0e0;
}

.SideInput {
    width: 60%;
    padding: 0 5px;
    height: 30px;
    line-height: 30px;
}

.SideBtn {
    width: 35%;
}

.BoxShadow {
    box-shadow: 0px 3px 8px 0px rgba(0,0,0,.3);
}
.transform-rotate-180 {
transform: rotate(180deg);
}


/********************************************DonationWidgetRamadan****************************************************/
#QCDonationGadgetRamadan {
    padding: 0 15px;
    direction: ltr;
    max-width: 290px;
    height: 380px;
    max-height: 420px;
    background: #ffffff;
    color: #3c3c3c;
}

.DropDownRamadan {
    margin: 15px 0;
}

    .DropDownRamadan select {
        width: 49%;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background-image: url(/Content/images/dropdownArrow.png);
        background-position: 97%;
        background-repeat: no-repeat;
        cursor: pointer;
        /*border-radius: 5px;*/
        height: 40px;
        line-height: 24px;
        outline: none;
        padding-left: 15px;
        margin-bottom: 12px;
    }

    .DropDownRamadan input {
        width: 48%;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
        /*border-radius: 5px;*/
        height: 40px;
        line-height: 24px;
        outline: none;
        text-align: center;
        margin-bottom: 12px;
    }

.width100 {
    width: 100% !important;
}

.blockBannerRamadan {
    position: relative;
    height: 106px;
    overflow: visible;
}