:root{
    --main-color: #0D1321;
    --secondary-color:#3A4D5E;
    --breadcrumb-bg-color:#F4F6F9;
    --content-bg-color:#FEFEFE;
    --border-color:#84A9B4;
    --border-btn-color:#A5A5A5; 
    --hover-btn-color:#f4f1f1;
    --bg-btn-color:#ffffff;
    --delete-btn-color:#DC1D1D;
    --text-color:#1D2D44;
    --checkbox-border-color: #F2AB26;
    --card-background-color:#F6F6F6;
}

*{
    box-sizing: border-box;
    background-color: #1b212e;
}

.wrapper {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}



.row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


/* ================== */
/* ====== card ====== */
/* ================== */
.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color:var(--card-background-color);
    padding: 16px;
    border-radius: 4px;
}

h3 {
    font-size: 18px;
    border-bottom: 1px solid var(--border-btn-color);
    background-color:var(--card-background-color);

    padding: 12px;
}


label {
    font-size: 14px;
    background-color:var(--card-background-color);
    padding-bottom: 2px;
}

input {
    width: 100%;
    border: 1px solid var(--border-btn-color);
    border-radius: 4px;
    background-color:var(--bg-btn-color);
    font-size: 14px;
    padding: 4px 8px;
}


/* =================== */
/* ====== group ====== */
/* =================== */

.groupinput {
    padding-top: 12px;
    background-color:var(--card-background-color);
}

.groupbtn {
    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 12px;
    padding-top: 16px;
    background-color:var(--card-background-color);
}

/* =================== */
/* ======= btn ======= */
/* =================== */

.btn {
    height: 30px;
    border-radius: 4px;
    background-color:var(--bg-btn-color);
    border: 1px solid var(--border-btn-color);
    padding:0px 10px;
    color: var(--main-color);
    margin-bottom: 2px;
}
.btn-revise {
    color: var(--bg-btn-color);
    border: 1px solid var(--secondary-color);
    background-color: var(--secondary-color);
}

.btn-revise {
    color: var(--bg-btn-color);
}


.btn-submit {
    border: none;
    color: var(--content-bg-color);
    background-color: var(--main-color);
}

.btn-submit:hover {
    color: var(--bg-btn-color);
}

/* ===============modal=============== */
.modal-header,.modal-title, .modal-body, .modal-footer  {
    background-color:var(--card-background-color);
}
.modal-header, .modal-footer {
    padding: 16px;
    border: none;
}

.modal-header{
    border-bottom: 0.5px solid var(--border-btn-color);
}

.modal-body {
    padding-top: 0px;
}


.modal-footer{
    border-top: 0.5px solid var(--border-btn-color);
}

.modal-title {
    font-size: 18px;
}


/* ========================== */
/* ======= Copyright ======= */
/* ======================== */

p{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 8px;
    font-size: 8px;
    color: #A4A6A9;
}

p a {
    color: #A4A6A9;
}