* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body { 
    font-family: Arial, Helvetica, sans-serif;
    background-color: #002c56;
}

.bg-c-w { background-color: #fff; }

.color-w { color: #ffffff; }
.color-r { color: #dc3545; }
.color-g { color: #28a745; }
.color-b { color: #007bff; }
.color-d { color: #000000; }
.color-y { color: #ffc107; }

.d-ib { display: inline-block; }
.d-b { display: block}
.d-i { display: inline;}

.of-h { overflow: hidden; }
.of-s { overflow: scroll; }
.of-a { overflow: auto; }
.of-v { overflow: visible; }

.d-f {
    -webkit-display: flex;
    -moz-display: flex;
    display: flex;
}
.d-f-w {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    flex-wrap: wrap;
}
.d-f-nw {
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.d-f-col {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    flex-direction: column;
}
.d-f-row {
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
}
.j-s {
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
}
.j-c {
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}
.j-e {
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
}
.j-a {
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    justify-content: space-around;
}
.j-b {
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
}
.j-e {
    -webkit-justify-content: space-evenly;
    -moz-justify-content: space-evenly;
    justify-content: space-evenly;
}

.a-i-s {
    -webkit-align-items: flex-start;
    -moz-align-items: flex-start;
    align-items: flex-start;
}
.a-i-c {
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}
.a-i-e {
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
}

.a-c-s {
    -webkit-align-content: flex-start;
    -moz-align-content: flex-start;
    align-content: flex-start;
}
.a-c-c {
    -webkit-align-content: center;
    -moz-align-content: center;
    align-content: center;
}
.a-c-e {
    -webkit-align-content: flex-end;
    -moz-align-content: flex-end;
    align-content: flex-end;
}
.a-c-b {
    -webkit-align-content: space-between;
    -moz-align-content: space-between;
    align-content: space-between;
}
.a-c-a {
    -webkit-align-content: space-around;
    -moz-align-content: space-around;
    align-content: space-around;
}

.t-l { text-align: left; }
.t-c { text-align: center; }
.t-r { text-align: right; }

.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-20 { width: 20%; }
.w-30 { width: 30%; }
.w-40 { width: 40%; }
.w-50 { width: 50%; }
.w-60 { width: 60%; }
.w-70 { width: 70%; }
.w-80 { width: 80%; }
.w-90 { width: 90%; }
.w-100 { width: 100%; }

.p-a { position: absolute; }
.p-r { position: relative; }
.p-f { position: fixed; }

.pd-1 { padding: 1%;}
.pd-2 { padding: 2%;}
.pd-3 { padding: 3%;}
.pd-4 { padding: 4%;}
.pd-5 { padding: 5%;}

.pd-l-1 { padding-left: 1%;}
.pd-l-2 { padding-left: 2%;}
.pd-l-3 { padding-left: 3%;}
.pd-l-4 { padding-left: 4%;}
.pd-l-5 { padding-left: 5%;}

.pd-r-1 { padding-right: 1%;}
.pd-r-2 { padding-right: 2%;}
.pd-r-3 { padding-right: 3%;}
.pd-r-4 { padding-right: 4%;}
.pd-r-5 { padding-right: 5%;}

.pd-t-1 { padding-top: 1%;}
.pd-t-2 { padding-top: 2%;}
.pd-t-3 { padding-top: 3%;}
.pd-t-4 { padding-top: 4%;}
.pd-t-5 { padding-top: 5%;}

.pd-b-1 { padding-bottom: 1%;}
.pd-b-2 { padding-bottom: 2%;}
.pd-b-3 { padding-bottom: 3%;}
.pd-b-4 { padding-bottom: 4%;}
.pd-b-5 { padding-bottom: 5%;}

.pd-x-1 { padding: 0 1%;}
.pd-x-2 { padding: 0 2%;}
.pd-x-3 { padding: 0 3%;}
.pd-x-4 { padding: 0 4%;}
.pd-x-5 { padding: 0 5%;}

.pd-y-1 { padding: 1% 0;}
.pd-y-2 { padding: 2% 0;}
.pd-y-3 { padding: 3% 0;}
.pd-y-4 { padding: 4% 0;}
.pd-y-5 { padding: 5% 0;}


.mg-a { margin: auto; }
.mg-1 { margin: 1%;}
.mg-2 { margin: 2%;}
.mg-3 { margin: 3%;}
.mg-4 { margin: 4%;}
.mg-5 { margin: 5%;}

.mg-l-1 { margin-left: 1%;}
.mg-l-2 { margin-left: 2%;}
.mg-l-3 { margin-left: 3%;}
.mg-l-4 { margin-left: 4%;}
.mg-l-5 { margin-left: 5%;}

.mg-r-1 { margin-right: 1%;}
.mg-r-2 { margin-right: 2%;}
.mg-r-3 { margin-right: 3%;}
.mg-r-4 { margin-right: 4%;}
.mg-r-5 { margin-right: 5%;}

.mg-t-1 { margin-top: 1%;}
.mg-t-2 { margin-top: 2%;}
.mg-t-3 { margin-top: 3%;}
.mg-t-4 { margin-top: 4%;}
.mg-t-5 { margin-top: 5%;}

.mg-b-1 { margin-bottom: 1%;}
.mg-b-2 { margin-bottom: 2%;}
.mg-b-3 { margin-bottom: 3%;}
.mg-b-4 { margin-bottom: 4%;}
.mg-b-5 { margin-bottom: 5%;}

.mg-x-1 { margin: 0 1%;}
.mg-x-2 { margin: 0 2%;}
.mg-x-3 { margin: 0 3%;}
.mg-x-4 { margin: 0 4%;}
.mg-x-5 { margin: 0 5%;}

.mg-y-1 { margin: 1% 0;}
.mg-y-2 { margin: 2% 0;}
.mg-y-3 { margin: 3% 0;}
.mg-y-4 { margin: 4% 0;}
.mg-y-5 { margin: 5% 0;}

.pe-n {
    pointer-events: none;
}
/* font-family: "times"; */

/* .center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1000px;
    height: 500px;
} */