@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
.f12 {
    font-size: 12pt;
}

.f14 {
    font-size: 14pt;
}

.f16 {
    font-size: 16pt;
}

.f18 {
    font-size: 18pt;
}

.f22 {
    font-size: 22pt;
}

.f26 {
    font-size: 26pt;
}


/* Setting main elements style */

* {
    box-sizing: border-box;
    text-decoration: none;
    color: #1f1f1f;
    padding: 0px;
    margin: 0px;
}

body {
    /* background-color: #f5f7f8; */
    background-color: #fbf6ff;
}

[type="text"],
[type="datetime-local"],
[type="password"] {
    border: 0px;
    outline: 1px solid lightgray;
    border-radius: 4px;
    height: 28px;
    padding: 4px;
    width: 100%;
    line-height: 8px ;
}

textarea {
    border: 0px;
    outline: 1px solid lightgray;
    border-radius: 4px;
    padding: 4px;
    width: 100%;
    resize: none;
}

[type="button"],
select {
    border: 0px;
    outline: 1px solid lightgray;
    border-radius: 4px;
    height: 28px;
    padding: 4px 12px;
}

[type="file"] {
    border: 0px;
    outline: 0px solid lightgray;
    height: 28px;
    font-size: 10pt;
    font-family: RubikLight;
}

[type="button"]:active {
    outline: 1px solid gray;
}

img.icon {
    width: 16px;
}

img.logo {
    width: 64px;
}


/********** container  *************/

.page-width {
    margin: auto;
    width: 1140px;
    padding: 0 16px;
}

.head,
.menu,
.foot {
    background-color: white;
    ;
}

.body {
    margin: 16px 0;
    min-height: 600px;
}

.foot {
    height: 120px;
    margin: auto;
    text-align: center;
    padding: 80px 0px;
}


/****** Grid Setup ****/

.grid {
    display: grid;
    gap: 16px;
}

.flex {
    display: flex;
    gap: 16px;
}

.grid>div,
.flex>div {
    display: flex;
    align-items: center;
}

.colmn8 {
    grid-template-columns: fit-content(100%) fit-content(100%) auto fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%);
}

.colmn7 {
    grid-template-columns: fit-content(100%) fit-content(100%) auto fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%);
}

.signup1 {
    grid-template-columns: fit-content(100%) auto fit-content(100%) auto fit-content(100%) auto auto auto fit-content(100%) auto;
}

.signup8 {
    grid-template-columns: fit-content(100%) auto fit-content(100%) auto fit-content(100%) auto fit-content(100%) auto;
}

.colmn4 {
    grid-template-columns: fit-content(100%) auto fit-content(100%) fit-content(100%);
}

.colmn5 {
    grid-template-columns: auto fit-content(100%) fit-content(100%) fit-content(100%) fit-content(100%);
}

.colmn2 {
    grid-template-columns: auto fit-content(100%);
}

.colmn1 {
    grid-template-columns: auto;
}


/****** Lines bottom ***************/

.line-bottom1 {
    /* border-bottom: 1px solid #f5f7f8; */
}

.table {
    display: table;
    width: 100%;
}

.tr {
    display: table-row;
}

.tc {
    display: table-cell;
}

.menu-width {
    width: 260px;
}

.sep {
    width: 20px;
}


/********* Menu *************/

.headitems {
    padding: 12px 0;
}

.menuitems ul {
    list-style: none;
}

.menuitems ul li {
    display: inline-block;
    margin: 0 2px;
}

.menuitems a {
    display: block;
    padding: 10px 16px;
    margin-top: 16px;
    font-size: 12pt;
    /* font-weight: 700; */
    color: #5c5c5c;
    /* border: 1px solid #f5f7f8; */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.menuitems a:hover {
    background-color: #fbf6ff;
}

.menuitems a:active {
    background-color: #fbf6ff;
}

.menu-active {
    background-color: #fbf6ff;
}


/***** Padding and margin containers*s*******/

.margin8 {
    margin: 16px;
}

.margin16 {
    margin: 16px 0;
}

.margin32 {
    margin-top: 32px;
    margin-bottom: 16px;
}


/************ BOxS  ****************/

.box {
    background-color: white;
    padding: 16px;
    border-radius: 8px;
}

.red {
    background-color: rgb(255, 181, 181);
    display: none;
}


/*********************************/

.successResult {
    display: none;
    gap: 16px;
    width: 100%;
    background-color: #e6fcdf;
    border-radius: 16px;
    border: 0px solid rgb(225, 255, 169);
    padding: 40px;
    align-items: center;
    justify-items: center;
}


/********************** /