/* font awesome */
/* http://fontawesome.github.io/Font-Awesome/cheatsheet/ */
@charset 'UTF-8';
/*@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,700,900'); */
/* V5 */
@import url('/asset/css/fontawesome.css');

:root {
    /* pale white : #F9F9F9 */
    --color1: #F9F9F9;
    /* black charcoal : 313131 */
    --color3: #313131;
    --color3_o5: rgba(31,31,31,0.5);
    --color3_o2: rgba(31,31,31,0.2);
    /* red : c31519 */
    --color2: #c31519;
    --color2_o5: rgba(195,21,25,0.5);
    /** Light Grey #D4D0C8*/
    --color4: #666666;
    /* grey : #ECECEC */
    --color5: #f7f7f7;
    /* redish */
    --color6: #d9534f;
    /*--colorCross: red; */
    --colorCross: rgba(255,0,0,0.05);
    --colorTick: green;
    --colorWarning: #ffc107;
    /** heights */
    --heightButton: 40px;
    --heightLine: 45px;
    --heightCombobox: 39px;
    --paddingParagraph: 10px;
    --paddingParagraphMedium: 20px;
    --heightButtonClearRow: 10px;
    --widthMaxPage: 1440px;
    --widthMinPage: 320px;
    --widthMinScreenResponsive: 768px;
    --widthButton: 45px;
    --borderRadius: 10px;
    /** font-size*/
    /**--fontSize: 14px;*/
    --fontSize: 12px;
    --fontSizeMedium: 16px;
    --fontSizeLarge: 22px;
    --fontSizeExtraLarge: 26px;
    --fontSizeHuge: 36px;
    /* --fontFamily: "Open Sans","Segoe UI","Helvetica Neue", "Lucida Grande", Arial, Helvetica, Verdana, sans-serif; */
    --fontFamily : Arial, Helvetica, sans-serif;
    --fontIconFamily: "Font Awesome 5 Pro";
    --fontIconSize: "24px";
    --fontIconSizeLarge: "32px";
    /** background-image */
    --imageBackground: url(/asset/img/background/background_image.jpg);
    --imageLoader: url(/asset/img/website-loader.gif);
    /** font awesome icons*/
    --iconTick: "\f058";
    --iconCross: "\f057";
    --iconArrowRightSingle: "\f054";
    --iconArrowRightDouble: "\f324";
    --iconArrowLeftSingle: "\f053";
    --iconArrowLeftDouble: "\f323";
    --iconExclamation: "\f071";
    --iconEmail: "\f674";
    --iconMedkit: "\f0fa";
}

.background-transparent{
    background-color : transparent !important;
}

/* BACKGROUND COLOR */
.background-color1{
    background : var(--color1);
}

.background-color2{
    background : var(--color2);
}

.background-color3{
    background : var(--color3);
}

.background-color4{
    background : var(--color4);
}

.background-color5{
    background : var(--color5);
}

.background-color6{
    background : var(--color6);
}

/*** FONT COLOR */
.forecolor-color1{
    color : var(--color1);
}

.forecolor-color2{
    color : var(--color2);
}

.forecolor-color3{
    color : var(--color3);
}

.forecolor-color4{
    color : var(--color4);
}

.forecolor-color5{
    color : var(--color5);
}

.forecolor-color6{
    color : var(--color6);
}

/** PADDING */
.padding {
    padding: var(--paragraphPadding);
}

.padding-left {
    padding-left: var(--paragraphPadding);
}

.padding-right {
    padding-right: var(--paragraphPadding) !important;
}

.padding-top {
    padding-top: var(--paragraphPadding);
}

.padding-bottom {
    padding-bottom: var(--paragraphPadding);
}

/** margin */
.margin {
    margin: var(--margin);
}

.margin-left {
    margin-left: var(--margin);
}

.margin-right {
    margin-right: var(--margin);
}

.margin-top {
    margin-top: var(--margin);
}

.margin-bottom {
    margin-bottom: var(--margin);
}

/** POSITION */
.position-top-left{
    position : relative;
    top : 0;
    left : 0;
}

.position-top-center{
    position : relative;
    top : 0;
    left : 0;
    margin : auto 0;
}

.position-top-right{
    position : relative;
    top : 0;
    right : 0;
}