/* imported fonts */

@font-face {
    font-family: gessTwo;
    src: url('/assest/fonts/arabicFont1.otf');
    unicode-range: U+600–6FF;
}

/* layout customiztion */

*{
    padding: 0;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    border: none;
    text-decoration: none;
}
#app{
    display: grid;
    grid-template-rows: 70px 50px 1fr 40px;
    grid-template-columns: min-content 1fr;
    background-color: #efefef;
}
#content{
    grid-row: 2/-1;
    grid-column: 2/-1;
    width: 100%;
    height: 100%;
    background-color: #efefef;
    overflow-y: scroll;
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* select font depending on langauge */

body.ar{
    font-family: gessTwo, sans-serif;
}
body.en{
    font-family: sans-serif;
}

/* customize scrollbar */

#content.scrollbar::-webkit-scrollbar{
    scroll-behavior: smooth;
    background-color: transparent;
    width: 8px;
}
#content.scrollbar::-webkit-scrollbar-thumb{
    background-color: #464646;
    border-radius: 50px;
}
#content.tocuh::-webkit-scrollbar{
    display: none;
}

/* active color */

div.activeColor{
    background-color: #ed1b24;
}

h2.activeColor{
    color: #ed1b24;
}

/* invalid input class */

input.invalid{
    border: 2px solid #FF9494 !important;
    border-radius: 4px;
    background-color: #ffea94 !important;
}

/* customize messages */

span.note strong{
    color: #FF9494;
    font-size: 14px;
}
span.note.message strong{
    color: #78e682;
}

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}