/* ===========================================================================
Variables
============================================================================*/

:root {
    --colorHighlight1: #f12f37;
    --colorHighlight1-hover: #c51a20;
    --colorGreen: #6dbe45;
    --sl-black: #333333;
}

/* ===========================================================================
Reset
============================================================================*/

img {
    max-width: 100%;
}

iframe {
    max-width: 100%;
}

ul{
    margin: 0;
    padding: 0;
}

/* ===========================================================================
Bootstrap
============================================================================*/
html[lang="ar"] .input-group-append {
	margin-left: unset;
	margin-right: -1px;
}

@media(min-width: 1200px) {
    .col-xl-20percent {
        flex:  0 0 20%;
        max-width: 20%;
    }
}

/* custom select */
html[lang="ar"] .custom-select {
	padding: .375rem .75rem .375rem 1.75rem;
	background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5'%3E%3Cpath fill='%23343a40' d='M2 0 0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") left .75rem center/8px 10px no-repeat;
}

/* ===========================================================================
Typography
============================================================================*/
body {
    background-color: #fff;
    color: #242424;
}

@media(max-width: 767.98px){
    body{
        font-size: 90%;
    }
}

a {
    color: #000;
    outline: none;
}
a:hover {
    color: black;
}

.bold {
    font-weight: bold !important;
}
html[lang="ar"] .bold {
    font-weight: 500 !important;
}

.fs-14 {
    font-size: 14px !important;
}
.fs-20 {
    font-size: 20px !important;
}

/* ===========================================================================
Utilities
============================================================================*/
.pointer-events-none{
    pointer-events: none;
}

/* ---------- Colors ---------- */
.color-gray {
    color: gray !important;
}
.color-white {
    color: white !important;
}
.color-highlight {
    color: var(--colorHighlight1) !important;
}

.bg-white {
    background-color: white !important;
}

/* ---------- Mirror ---------- */
html[lang="ar"] .mirror-on-rtl {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}
html[lang="ar"] i.mirror-on-rtl {
    display: inline-block;
}

  
/* ---------- Border Radius ---------- */
.br-50{
    border-radius: 50px;
}
.br-20{
    border-radius: 20px;
}
.br-10{
    border-radius: 10px;
}
.br-7{
    border-radius: 7px;
}

/* ---------- Display ---------- */
@media(min-width: 1200px){
    .hide-1200-and-up{
        display: none !important;
    }
}
@media(max-width: 1199.98px){
    .hide-lower-than-1200{
        display: none !important;
    }
}


/* ---------- Badge ---------- */
.badge {
	font-size: 16px;
	font-weight: 300;
	border-radius: 2px;
}
.badge-info {
	color: #fff;
	background-color: var(--colorHighlight1);
}

.badge-outline {
	display: inline-flex;
	border: 1px solid #757575;
	border-radius: 5px;
	padding: 3px 7px;
	min-width: 70px;
	justify-content: center;
}
.badge-outline-danger {
	color: #e4040e;
}
.badge-outline-success {
	color: #3fa20e;
}


/* ---------- Margin Padding ---------- */
html[lang="en"] .mr-10px-direction-dependent {
    margin-right: 10px;
}
html[lang="ar"] .mr-10px-direction-dependent {
    margin-left: 10px;
}

/* ----------- Forms ---------- */
.form-control::placeholder {
	color: #6a6a6a;
	opacity: 1;
}
.field-validation-error {
	color: red;
    font-weight: 400;
}
html[lang="ar"] .field-validation-error {
    font-weight: 300;
}