.width-full{
    width: 100% !important;
}

.height-full{
    height: 100% !important;
}

.non-show{
    display: none !important;
}

.non-show.f-row{
    display: none !important;
}

.non-show.f-col{
    display: none !important;
}

/*display flex class*/
.f-row{
    display: flex !important;
    flex-direction: row !important;
}

.f-col{
    display: flex !important;
    flex-direction: column !important;
}

.jc-c{
    justify-content: center;
}

.jc-fs{
    justify-content: flex-start;
}

.jc-fe{
    justify-content: flex-end;
}

.jc-sb{
    justify-content: space-between;
}

.jc-sa{
    justify-content: space-around;
}

.jc-se{
    justify-content: space-evenly;
}

.ai-c{
    align-items: center;
}

.ai-fs{
    align-items: flex-start;
}

.ai-fe{
    align-items: flex-end;
}

.ai-s{
    align-items: stretch;
}

.ai-b{
    align-items: baseline;
}

.ac-c{
    align-content: center;
}

.ac-fs{
    align-content: flex-start;
}

.ac-fe{
    align-content: flex-end;
}

.ac-sa{
    align-content: space-around;
}

.ac-sb{
    align-content: space-between;
}

.ac-s{
    align-content: stretch;
}

.p-r{
    position: relative;
}

.p-a{
    position: absolute;
}

.p-sk{
    position: sticky;
}

.t-0{
    top : 0;
}

.b-0{
    bottom : 0;
}

.l-0{
    left: 0;
}

.r-0{
    right: 0;
}

.to-e{
    text-overflow: ellipsis;
}

.ws-nw{
    white-space: nowrap;
}

.p-t-10{
    padding-top: 10px;
}

.p-b-10{
    padding-bottom: 10px;
}

.p-l-10{
    padding-left: 10px;
}

.p-r-10{
    padding-right: 10px;
}

.p-10{
    padding: 10px;
}

.m-t-10{
    margin-top: 10px;
}

.m-b-10{
    margin-bottom: 10px;
}

.m-l-10{
    margin-left: 10px;
}

.m-r-10{
    margin-right: 10px;
}

.m-10{
    margin: 10px;
}

.fw-w{
    flex-wrap: wrap;
}