@charset "utf-8";

/* 정렬 */
.flex {
    display: flex;
    flex-wrap: wrap;
}

.flex-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}


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

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

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

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

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

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

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



/* 정렬 배율 */

.flex5 {
    flex: 0 0 4.5%
}

.flex10 {
    flex: 0 0 9.5%
}

.flex15 {
    flex: 0 0 14.5%
}

.flex20 {
    flex: 0 0 19.5%
}

.flex25 {
    flex: 0 0 24.5%
}

.flex30 {
    flex: 0 0 29.5%
}

.flex35 {
    flex: 0 0 34.5%
}

.flex40 {
    flex: 0 0 39.5%
}

.flex45 {
    flex: 0 0 44.5%
}

.flex50 {
    flex: 0 0 49.5%
}

.flex55 {
    flex: 0 0 54.5%
}


.flex60 {
    flex: 0 0 59.5%
}

.flex65 {
    flex: 0 0 64.5%
}


.flex70 {
    flex: 0 0 69.5%
}

.flex75 {
    flex: 0 0 74.5%
}

.flex80 {
    flex: 0 0 79.5%
}

.flex85 {
    flex: 0 0 84.5%
}


.flex90 {
    flex: 0 0 89.5%
}

.flex95 {
    flex: 0 0 94.5%
}



/* btn */
.small-btn {
    padding: 5px 10px;
    border-radius: 5px;
}

.large-btn {
    width: 100%;
    padding: 5px 15px;
    border-radius: 5px;
}

.icon-btn {
    padding: 5px;
    border-radius: 50%;
}

.logout-btn {
    padding: 5px 10px;
    color: #aaa;
    position: relative;
}

.logout-btn::before {
    content: "";
    width: 1px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background-color: #aaa;
}

.close-btn {
    color: #d6def6;
}

.blue-btn,
.blue-border-btn:hover {
    background-color: #213f99;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.red-btn,
.red-border-btn:hover {
    background-color: #ff5d5d;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.green-btn,
.green-border-btn:hover {
    background-color: #13833b;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.orange-btn,
.orange-border-btn:hover {
    background-color: #f29600;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.darkg-btn,
.darkg-border-btn:hover {
    background-color: #434343;
    color: #fff;
    transition: all 0.3s ease-in-out;
}

.gray-btn,
.gray-border-btn:hover {
    background-color: #eee;
    color: #333;
    transition: all 0.3s ease-in-out;
}


.blue-border-btn {
    border: 1px solid #213f99;
    color: #213f99;
    background-color: #fff;
}

.red-border-btn {
    border: 1px solid #ff5d5d;
    color: #ff5d5d;
    background-color: #fff;
}

.green-border-btn {
    border: 1px solid #13833b;
    color: #13833b;
    background-color: #fff;
}

.orange-border-btn {
    border: 1px solid #f29600;
    color: #f29600;
    background-color: #fff;
}

.darkg-border-btn {
    border: 1px solid #434343;
    color: #434343;
    background-color: #fff;
}

.gray-border-btn {
    border: 1px solid #aaa;
    color: #aaa;
    background-color: #fff;
}

.tp-btn {
    background-color: transparent;
    width: 15px;
    height: 15px;
    margin-left: 10px;
}




/* text 정렬 */
.text-lf {
    text-align: left;
}

.text-ct {
    text-align: center;
}

.text-rg {
    text-align: right;
}