:root {
    --red: #F9157C;
    --light-green: #16F7CB;
    --blue: #108DE2;
    --yellow: #EDBC20;
    --green: #0BAD0F;
    --gray: #EDEDED;
    --deep_gray: #CDCDCD;
    --black: #222222;
}

@font-face {
    font-family: 'Noto Sans';
    font-weight: 300;
    src:
        url('../font/NotoSans-Regular.woff2') format('woff2'),
        url('../font/NotoSans-Regular.woff') format('woff');
}
@font-face {
    font-family: 'Noto Sans';
    font-weight: 500;
    src: 
        url('../font/NotoSans-Bold.woff2') format('woff2'),
        url('../font/NotoSans-Bold.woff') format('woff');
}
@font-face {
    font-family: 'Noto Sans';
    font-weight: 100;
    src:
        url('../font/NotoSans-Light.woff2') format('woff2'),
        url('../font/NotoSans-Light.woff') format('woff');
}

.w-5 {width: 5% !important}
.w-10 {width: 10% !important}
.w-15 {width: 15% !important}
.w-20 {width: 20% !important}
.w-30 {width: 30% !important}
.w-35 {width: 35% !important}
.w-40 {width: 40% !important}
.w-45 {width: 45% !important}
.w-55 {width: 55% !important}
.w-60 {width: 60% !important}
.w-65 {width: 65% !important}
.w-70 {width: 70% !important}
.w-80 {width: 80% !important}
.w-85 {width: 85% !important}
.w-90 {width: 90% !important}
.w-95 {width: 95% !important}

.h-5 {height: 5% !important}
.h-10 {height: 10% !important}
.h-15 {height: 15% !important}
.h-20 {height: 20% !important}
.h-30 {height: 30% !important}
.h-35 {height: 35% !important}
.h-40 {height: 40% !important}
.h-45 {height: 45% !important}
.h-55 {height: 55% !important}
.h-60 {height: 60% !important}
.h-65 {height: 65% !important}
.h-70 {height: 70% !important}
.h-80 {height: 80% !important}
.h-85 {height: 85% !important}
.h-90 {height: 90% !important}
.h-95 {height: 95% !important}
   
   

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    display: flex !important;
    flex-direction: column !important;
    max-width: 1280px !important;
    margin: 0 auto !important;

    font-family: "Noto Sans" !important;
    font-weight: 300 !important;
}

body * {
    box-sizing: border-box;
    pointer-events: scroll;

    -ms-user-select:none;
	-moz-user-select:-moz-none;
	-webkit-user-select:none;
	-khtml-user-select:none;
	user-select:none;
	-webkit-user-drag:none;
}

#loader {
    display: none;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);

    overflow: hidden;
}

button{
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
}
 
button:focus, input:focus, select:focus{
    outline:none !important;
}

header {
    width: 100%;
    /* height: 105px; */
    height: auto;
    background-color: #FFF;
    z-index: 100;
}

header > #logo {
    width: 100%;
    /* height: 55px; */
    height: auto;
}

header > #logo .logo_img {
    /* width: auto;
    height: 100%; */
    height: 50px;
}

header > #logo .logo_img img {
    width: auto;
    height: 100%;
}

header > #nav {
    width: 100%;
    /* height: 50px; */
    height: auto;
    background-color: #575757;
}

header > #nav .nav-item {
    min-width: 15% !important;
    width: auto !important;
    text-align: center !important;
    height: 40px;
    line-height: 40px;
}

header > #nav .nav-link {
    color: #FFF !important;
}

footer {
    width: 100%;
    height: 45px;
    padding: 0 1%;

    font-size: .9rem !important;
    font-weight: 300 !important;
    background-color: #575757 !important;
    color: #efefef !important;

    box-sizing: border-box;
}

/* footer {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 8%;
    padding: 0 2%;
} */

nav#navigation {
    min-height: 9%;
    margin-bottom: 1%;
    padding: 0 2%;
    background-color: var(--deep_gray);
    font-size: 1.2rem;
    color: var(--black);
}

.navMenuSelect {
    font-size: 1.25rem;
    font-weight: 500;
}

/* nav {
    width: 20%;
    height: 85%;
    margin-right: 1%;
    float: left;
}

nav > ul {
    list-style-type: none;

    width: 100%;
    max-width: 250px;
    height: max-content;
    padding: 0;
    margin: 0;
}

nav > ul > li > div {
    width: 100%;
    padding: 10px 0;

    background-color: var(--red);

    font-size: 1.2rem;
    color: #FFF;
    font-weight: 700;
    text-align: center;
}

nav > ul > li > ul {
    list-style-type: disc;

    padding: 10px 40px;

    background-color: var(--gray);

    font-size: 1.0rem;
    color: var(--black);
    font-weight: 300;
}

nav > ul > li > ul > li {
    padding: 5px 0;
    margin: 3px 0;
}

nav > ul > li > ul > li > span {
    cursor: pointer;
} */

/* main {
    width: 79%;
    height: 85%;
    float: right;
} */

/* main {
    width: 100%;
    flex: 1;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
} */

main {
    width: 98%;
    /* height: calc(100% - 150px); */
    flex: 1;
    margin: 0 1%;
    /* overflow: hidden; */
    overflow-x: hidden;
    overflow-y: auto;
}

header .logo, header .logo img {
    cursor: pointer;
}

input[type=checkbox] {
    min-width: 1.2em;
    min-height: 1.2rem;
    border-color: var(--deep_gray);
    cursor: pointer;
}

table.table.table-bordered {
    border-color: var(--black);
}

table.table > tbody > tr {
    cursor: pointer;
}

/* #board {
    min-height: 800px;
} */

/* #board_foot {
    height: 50px;
} */

.board_select_group, .board_btn_group {
    width: 30%;
}

.board_search_group {
    width: 40%;
}

.board_search_input {
    border-color: var(--black);
}

.board_search_btn {
    width: 25%;
    background-color: var(--blue);
}

.board_btn_group > button {
    width: 45%;
}

.board_btn_new {
    background-color: var(--red);
}

.board_btn_delete {
    background-color: var(--black);
}

/* board_write */
.write_file_list {
    min-height: 80px;
    height: auto;
    padding: .375rem .75rem;
}

.write_file_search {
    background-color: var(--blue);
}

.write_btn_complete {
    background-color: var(--blue);
}

.write_btn_cancel {
    background-color: var(--black);
}

pre {
    font-family: inherit !important;
    font-weight: lighter !important;
}

textarea.form-control {
    height: 5rem !important;
    min-height: 5rem !important;
}

.checkbox_custom_box_group {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .5rem 0;
}

.checkbox_custom_box {
    display: flex;
    flex: 0 0 calc(50% - 0.5rem);
}

.checkbox_custom_box > input {
    display: none;
}

.checkbox_custom_box > input + label {
    flex: 1;
    display: flex;
    gap: 1rem;
    justify-content: center;
    padding: .45rem 2rem;
    border: 2px solid #108de2;
    border-radius: .3rem;
    color: #0f669f;
    word-break: keep-all;

    cursor: pointer;
}

.checkbox_custom_box > input + label > .bi-circle { display: block;}
.checkbox_custom_box > input + label > .bi-check-lg { display: none;}
.checkbox_custom_box > input:checked + label > .bi-circle { display: none;}
.checkbox_custom_box > input:checked + label > .bi-check-lg { display: block;}

.checkbox_custom_box > input:checked + label {
    background-color: #108de2;
    color: #FFF;
}

@media screen and (max-width: 579px) {
    header > #nav .nav-item {
        width: 50% !important;
    }
}