@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@900&display=swap'); /*Tajawal*/
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200&display=swap');/*Cairo*/
@import url('https://fonts.googleapis.com/css2?family=Amiri&display=swap');/*Amiri*/
@import url('https://fonts.googleapis.com/css2?family=Reem+Kufi&display=swap');/*Reem Kufi*/
@import url('https://fonts.googleapis.com/css2?family=Lalezar&display=swap');/*Lalezar*/
@import url('https://fonts.googleapis.com/css2?family=Rakkas&display=swap'); /*Rakkas*/




body {
    padding-top: 50px;
    padding-bottom: 20px;
   
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
    font-family: 'Tajawal', sans-serif;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}



#colorSelector {
    position: relative;
    width: 36px;
    height: 36px;
    background: url(../images/select.png);
}

    #colorSelector div {
        position: absolute;
        top: 3px;
        left: 3px;
        width: 30px;
        height: 30px;
        background: url(../images/select.png) center;
    }

#colorSelector2 {
    position: absolute;
    top: 0;
    left: 0;
    width: 36px;
    height: 36px;
    background: url(../images/select2.png);
}

    #colorSelector2 div {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 28px;
        height: 28px;
        background: url(../images/select2.png) center;
    }

#colorpickerHolder2 {
    top: 32px;
    left: 0;
    width: 356px;
    height: 0;
    overflow: hidden;
    position: absolute;
}

    #colorpickerHolder2 .colorpicker {
        background-image: url(../images/custom_background.png);
        position: absolute;
        bottom: 0;
        left: 0;
    }

    #colorpickerHolder2 .colorpicker_hue div {
        background-image: url(../images/custom_indic.gif);
    }

    #colorpickerHolder2 .colorpicker_hex {
        background-image: url(../images/custom_hex.png);
    }

    #colorpickerHolder2 .colorpicker_rgb_r {
        background-image: url(../images/custom_rgb_r.png);
    }

    #colorpickerHolder2 .colorpicker_rgb_g {
        background-image: url(../images/custom_rgb_g.png);
    }

    #colorpickerHolder2 .colorpicker_rgb_b {
        background-image: url(../images/custom_rgb_b.png);
    }

    #colorpickerHolder2 .colorpicker_hsb_s {
        background-image: url(../images/custom_hsb_s.png);
        display: none;
    }

    #colorpickerHolder2 .colorpicker_hsb_h {
        background-image: url(../images/custom_hsb_h.png);
        display: none;
    }

    #colorpickerHolder2 .colorpicker_hsb_b {
        background-image: url(../images/custom_hsb_b.png);
        display: none;
    }

    #colorpickerHolder2 .colorpicker_submit {
        background-image: url(../images/custom_submit.png);
    }

    #colorpickerHolder2 .colorpicker input {
        color: #778398;
    }

#customWidget {
    position: relative;
    height: 36px;
}