html, body {
    font-size: calc(60% + 0.8vmin);
    height: 100%;
}

.container {
    max-width: 1170px !important;
}

@font-face {
    font-family: "Unilever Shilling";
    src: url("unilever-font/UnileverShilling.ttf");
    src: url("unilever-font/UnileverShilling.ttf")format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: "Unilever Shilling";
}
main {
  margin: 0 auto;
}

h1 {
    font-size: 2.2rem;
}

h2 {
    font-size: 1.6rem;
}

h3 {
    font-size: 1.3rem;
}

    h1, h2, h3.h2 {
        font-family: "Unilever Shilling";
        font-weight: bold;
        letter-spacing: -0.06em;
        color: #000066;
    }

        h2.h3, h2.h4 {
            font-family: "Unilever Shilling";
            text-transform: uppercase;
            letter-spacing: -0.06em;
        }

    h2.h3, h2.h4, h3, h4, h5 {
        color: inherit;
    }

h3, h4, h5 {
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

h2 {
    font-size: 2.2em;
}

a {
    color: #226bca;
}

.font-unilever {
    font-family: "Unilever Shilling";
}

.text-unilever {
    color: #0F0E9A !important;
}

.bg-unilever {
    background-color: #0F0E9A;
}

    a:hover, a:focus {
        color: #0a4476;
    }

.search-partial {
    border: none;
    border-bottom: 1px solid #00A8DD;
    color: #00A8DD;
    outline: none;
    transition: border-color 0.3s;
}

    .search-partial:focus {
        border-bottom: 1px solid #007aaf; /* warna border saat aktif */
    }

    .section-content {
        margin-top: 124px;
    }

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

    .body-content h2.title {
        margin-top: 0;
    }

    .body-content h3.title {
        margin-top: 1.5em;
        margin-bottom: 0;
    }

    .body-content img {
        display: block;
        margin: 10px auto;
    }

    .body-content p img {
        display: block;
        text-align: center;
        margin: 10px auto;
    }

        .body-content p img.float {
            float: left;
            margin: 10px 10px 10px 0;
        }

    .body-content .text-hide {
        display: none;
    }

.article {
    display: flex;
}

h1 {
    font-weight: bold;
    font-size: 2em;
}

table .success, .table .success, table .warning, .table .warning, table .danger, .table .danger, table .info, .table .info {
    color: #fff;
}

    table .success a, .table .success a, table .warning a, .table .warning a, table .danger a, .table .danger a, table .info a, .table .info a {
        color: #fff;
    }

table > thead > tr > th, .table > thead > tr > th, table > tbody > tr > th, .table > tbody > tr > th, table > tfoot > tr > th, .table > tfoot > tr > th, table > thead > tr > td, .table > thead > tr > td, table > tbody > tr > td, .table > tbody > tr > td, table > tfoot > tr > td, .table > tfoot > tr > td {
    border-color: #ddd;
}

table.table a {
    text-decoration: none;
}

cite:hover {
    color: #333;
}

[disabled].form-control, [readonly].form-control, fieldset[disabled] .form-control {
    background-color: #f3f3f3;
    font-weight: bold;
}

#top {
    min-height: 100%;
    overflow: auto;
    padding-top: 30px;
    padding-bottom: 120px;
}

.admin #top {
    background: none;
}

.text-danger {
    color: #bf0165;
}

.text-warning {
    color: #f5993e;
}

.text-info {
    color: #37adc8;
}

.text-muted td {
    background-color: #dedede;
}

.employee {
    margin: 0 5px 10px;
    width: 350px;
    height: 146px;
}

.sexF {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAACSCAMAAAA6qFJTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBQTFRF7e7t8OTT7uvl/r5z9Nu799Kl////8eHM7PDw3WuW21SH2Dp1+cuU4pSy6dbf7+je6tzj2UJ73nGa4Ymr7e3p7+fa5rzO/7pq6+Tp9dax+8eJ/cF646G85KrB+M6c6+js/rxu+smO/MJ9+8WF8t7F2kyB/7ts33qg9dau9Nm26M/a9/n57O3v6uDm58bU5rXJ9tOo5bDF9tSr6MrX2T943F+O8PP0/MOA/cB32D1399Cf/MSC2Dt28ObX/7pp7PDx9czamwAAAAd0Uk5T////////ABpLA0YAAAPkSURBVHja7N3bUuJQEIXhcDCAZkQwgBxUEAQlnhVEBPb7v9XAVM0oBOSUNVWp/OsavfhqV3fvThTLtm2vP/me+kUqbhZyen0UWA5NJNL3prSWbc/j/sngIObOf/i+2MkFxJu/NxEBnvEu0Z3l/aZgzX/65DkfCO+pMZHxtbzJylSS2fTcx++Oa739eV8jw2s8qz/5Kc544Qcuu78O9yy9J9Hh7VuTn5NwUos/c/awV6PLmAhlHe9k0k4MF4/wrNG97ag7OoV3UXjw4hvVTs53LBLP8PpTd1LWYhkudnYoEh9n8C4f1Q5iviLxnN9WOG/gXXWEm+XC4i84rmW2um+cw/vTJNFIuou/o5vPjTauDV141xQJ333OmPPehpNE7wzetfHd56bTcO3wjak3GN7Zfa7lm9WO1183ckV4N210/sXlWuDOJbybZ+vF5auBd7tGV/YvLjOrLsQRq7wB8G6xuPzo3afh3SHtslm/uMx17gyndzff+prF5SiX+WUMvLsLr1pcfhyNjq47te4dvHsKV5csLosPtcfHyyjaBs07G4aHvsVllBM07/LFJbyBHuEli0t4g0yi0XLRlfFO81kuWPAqU0kW4FWmGYNXmfoFvMqUHHilKbvwKutDEl5lEkl4lXGy8Crb2w280vHXgleYwRheZXVIpuEVZgivdLnjwqssvjF4lTcLeKVJwas8vVl4lZMZxUHa2uLwKudeC15hIrrT+U+89RS8Sl4XXmVny8JLZwsrb8vAy8YhpLyDNLzCvFvwCnNr4BXuc+LwCvPpwivMSxpeYXiFj6k3tLwVAy/v74WUt12AV3kjNvAqS68Fr/IvVzi9yudAY3iV27I4vMI0DLzCqfciDa+ys8GrvFSMKQ7sesPKOzTwCmvDLbw8xQzt6S3Aq7xUuPAKc2DgFd7ZWvAqV+kpeLmzhZU34p1NzRvtqVfNW0/Bq3w/Jw6vcnCAl84WWt6kgVfY2WLwCnPlwssz+LDyOvxrejpbWHnrWXiFvE2+GETJ6xh4hbveYRpeZWeDV8iboLMpeSt8L56S9wldIW+bS4X09PKVjkreBHODkvcJXiUvtUHJG/mnmFpepl4p7xBbIW8iha2Qt8rcIOQtXUCrPL3UBnhDy/vO1Kvk5Uas5GUZqeXlOZCSt8o+R8l7RWdT8r7Q2YS8JaZeJe+AzqbkvcJVydugsyl5eYFEyVti6lXyVqkNSt4mrEpeSi+8oeVt09mUvJ/8QZCS12GfI+QtlVEV8rZvUP3i7fPmqS59ywv81UjubP/iWXbQx5dXI78Or23ZAfvyDP6b7ozX9oIE5r8M/MX1prS/BRgA87nvItOp+ZgAAAAASUVORK5CYII=") no-repeat;
}

.sexM {
    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAACSCAMAAAA6qFJTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAMBQTFRF/r5z9Nu799Kl0+Tu////8eHM7e7t3env+cuU4+zwtNbqwNzrfLzi7PDw8OXV7+je7e3qWazeYrDf7+fan8znyuDt/7pq9daxVard+8eJ/cF6icLk+M6cqtHo/rxu+smO6e/x/MJ9+8WFabPg8t7F/7tsu9nr7ezm9dau9Nm28OTS9/n57urjl8nmgL7j9tOocbfhlMfl9tSrc7jhU6nd8PP0/MOA/cB36/Dx7uvl/MSC99Cf8ObX7/P0/7pp7PDxHNxX+wAAAAV0Uk5T/////wD7tg5TAAAD3ElEQVR42uzd21LiUBCF4SABwhlEDnJUBFFBdHQQFYf9/m81MFWjY8KZrKlK5V/X6MVXu7p7d6JYtm0PJ/N/027GBsaVH6c/fcuVCUUmwwWtZdvfcf9kepIrfP9wIt0o+sQ7TpiQAC95V+gu83JTiruEU2NfeO9fTWh8reF8bc4j+ey3j19EW8/H85ZNaDK0JvNNcT5cP5CMnl0dWXoT4eGdWPPNsZyY+2eS5aMaXcaEKNt45/O+NXMf4WMaXe0eXrfw9GnkEU4dWCRS8HrTdmJxd5FINw4QriXhXT2qndx5j/B43zI8foV33RHuVkvuXxBtZfYqwyl4N00SnUjBIzwu1nauDVED7+Yi4bnPGZN63PEIPybh3RrPfW7R6FpXuwiPDby7xOl5ZrXo/dY+V0zDu2uj8y4uo9vuc40kvLtn78Vl2cC7X6Or7r64rGVe4T2+0a1ZXNaeE/Aekn7VbF9cFhsXxsB7kG972+KymDkzBt7DhdctLpc3utNGK3oB75HC9RWLy3S5dX2dDKOt37zLYXjmWVyGOX7zrl5cwuvrEV6xuITXz1idXgFdGe8i79VSHF5lziMleJXp5uBVpt2EV5mKA6801QK8yvoQgVcZKwKvMk4eXmV7u4FXOv7G4RVm+gGvsjpEsvAKM4NXutwpwKssvnfwKm8W8EoTg1d5evPwKiczioO0tY3gVc69cXiFCelO5z/xtmPwKnkH8Co7Wx5eOltQeXsGXjYOAeWdZuEV5iUOrzC3Bl7hPmcErzDvBXiFecrCKwyv8Emn3hy8yofwBl7e3wsob78Er/JGbOBVlt44vMq/XOH0Kp8DfcCr3Ja9wStMx8ArnHqbWXiVnQ1e5aXig+LArjeovDMDr7A23MLLU8zAnt4SvMpLRQFeYU4MvMI7Ww9e5So9Bi93tqDyhryzqXnDPfWqedsxeJXv5wzgVQ4O8NLZAssbMfAKO1sOXmEuB/DyDD6ovA7/mp7OFlTedh5eIW+XLwZR8joGXuGud5aFV9nZ4BXyWnQ2Je8534un5H1AV8jb51IhPb05dIW8FnODkvcBXiUvX/eq5J2+gSvkZeqV8s6wFfJaMWyFvHXmBiFvpQmt8vRSG+ANLO8LU6+SlxuxkpdlpJaX50BK3jq7XiXvJZ1NyftEZxPyVph6lbxTOpuS9xJXJW9nAKyQlxdIlLwVpl4lb32Eq5C3C6uSl9ILb2B5+7yfo+R9Z+pV8jrsc4S8lSqqQt7+DapfvBPePNVlYg19fzWSzvaZoWX7fXx5NfIzv2zL9tmXZ/BfpcFe8tpDP4H5LwN/cYcL2t8CDADUw4GU2OcNIwAAAABJRU5ErkJggg==") no-repeat;
}

.profilecontainer {
    padding: 12px;
    font-size: 13px;
    color: #222;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

    .profilecontainer h3 {
        margin: 0;
        font-size: 15px;
        font-family: 'Unilever DIN Offc Pro Bold','Segoe UI',Arial, sans-serif;
    }

    .profilecontainer .contact {
        margin-top: 10px;
    }

.photocontainer {
    width: 100px;
    height: 120px;
    overflow: hidden;
    float: left;
    margin: 12px 0 12px 8px;
    background-color: #ecf0f1;
}

    .photocontainer.big {
        width: 200px;
        height: 240px;
    }

    .photocontainer img.photo {
        max-width: 100px;
        margin: 0;
    }

    .photocontainer.big img.photo {
        max-width: 200px;
    }

.logo {
    margin: 25px 0 0;
    text-align: center;
    display: none;
}

.imgLogo {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: url("../../Content/themes/img/logo-hr-portal-s.png") no-repeat;
    background-size: contain;
    width: 303px;
    height: 90px;
    padding-left: 303px;
    z-index: 100;
}

.nav > li {
    display: normal;
}

    .nav > li > a {
        padding: 10px;
        font-size: 12px;
    }

.body-content .nav > li > a:hover {
    background-color: #007DBB;
    color: #fff;
}

.body-content .nav-tabs > li > a:hover {
    background-color: #eee;
}

#headertool {
    width: 280px;
    margin-right: 40px;
    display: none;
}

.sidebar-footer {
    margin-top: 60px;
    margin-left: 50px;
    padding: 10px;
    text-align: left;
    white-space: nowrap;
}

.backtotop {
    margin-bottom: 30px;
}

    .backtotop a {
        color: #0e85c8;
    }

.copyright {
    margin-top: 30px;
    color: #fff;
}

.statbox {
    border-top: dotted 1px #bbb;
    border-bottom: dotted 1px #bbb;
    text-align: left;
    width: 140px;
    padding: 10px;
    color: #eee;
    display: none;
}

    .statbox table {
        width: 100%;
    }

    .statbox h4 {
        font-size: 14px;
        margin: 0;
    }

    .statbox th {
        font-weight: normal;
        vertical-align: bottom;
        font-size: 11px;
    }

    .statbox td {
        text-align: right;
        font-weight: bold;
        font-size: 15px;
    }

#mainmenu {
    margin-left: 40px;
    margin-bottom: 20px;
    background-color: transparent;
}

#mainmenu, legend {
    font-family: 'Unilever DIN Offc Pro Bold','Segoe UI',Arial, sans-serif;
    text-transform: uppercase;
    color: #eee;
    font-size: 12px;
}

    #mainmenu li {
        border-top: dotted 1px #bbb;
        margin-top: 0;
        height: auto;
    }

        #mainmenu li a:hover {
            background-color: transparent;
        }

.homemenu {
    border-bottom: solid 1px dotted;
    text-align: center;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-end;
    display: grid;
    grid-template-rows: auto;
}

    .homemenu h2 {
        font-family: 'Unilever Illustrative Type','Segoe UI',Arial, sans-serif;
        font-size: 16px;
        letter-spacing: 0;
        margin: 15px 0 30px 0;
        font-weight: normal;
    }

    .homemenu p {
        margin: 0;
    }

    .homemenu .panel {
        border: none;
        padding: 0;
        box-shadow: none;
        text-align: center;
        margin: 10px;
        -ms-flex: 1;
        min-width: 200px;
    }

    .homemenu .icon-menu {
        margin: 0 auto;
        max-width: 200px;
    }

        .homemenu .icon-menu h2 {
            white-space: pre-line
        }

    .homemenu .panel-body {
        text-align: center;
    }

    .homemenu .panel-primary {
        height: 170px;
    }

    .homemenu .panel .menu-desc {
        display: none;
    }

.mostvisited {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: dotted 1px #aaa;
}

#employeelist {
    margin: 20px 0 0 0;
    display: -ms-flexbox;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-end;
    display: grid;
}

    #employeelist .panel {
        min-height: 180px;
        margin: 10px;
        border: none;
        padding: 0;
        box-shadow: 0 0 0.5cm rgba(0,0,0,0.2);
        -ms-flex: 1;
        min-width: 300px;
    }

@media screen and (min-width: 1px) and (max-width: 767px) {
    .homemenu {
        /*-ms-grid-columns: auto auto;*/
        grid-template-columns: auto auto;
    }

    #employeelist {
        /*-ms-grid-columns: auto;*/
        grid-template-columns: auto;
    }
}

@media screen and (min-width:768px) and (max-width: 890px) {
    .homemenu {
        /*-ms-grid-columns: auto auto auto;*/
        grid-template-columns: auto auto auto;
    }

    #employeelist {
        /*-ms-grid-columns: auto auto;*/
        grid-template-columns: auto auto;
    }
}

@media screen and (min-width:891px) and (max-width: 991px) {
    .homemenu {
        /*-ms-grid-columns: auto auto auto auto;*/
        grid-template-columns: auto auto auto auto;
    }

    #employeelist {
        /*-ms-grid-columns: auto auto;*/
        grid-template-columns: auto auto;
    }
}

@media screen and (min-width:992px) {
    .homemenu {
        /*-ms-grid-columns: auto auto auto auto auto;*/
        grid-template-columns: auto auto auto auto auto;
    }

    #employeelist {
        /*-ms-grid-columns: auto auto auto;*/
        grid-template-columns: auto auto auto;
    }
}

.column {
    float: left;
}

.size-1of5 {
    width: 20%;
}

.profilephoto {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

    .profilephoto img {
        width: 90px;
        margin: 0;
    }

    .profilephoto h4 {
        text-align: center;
        font-size: 30px;
        font-family: 'claire_handregular','Unilever Illustrative Type','Segoe UI',Arial, sans-serif;
        letter-spacing: 0;
        margin: 0;
    }

#menu {
    text-transform: uppercase;
    font-size: .9em;
    margin-top: 0;
}

    #menu a {
        font-weight: bold;
        color: #007dbb;
    }

.admin #menu {
    margin-top: 10px;
}

.icon {
    width: 90px;
    height: 90px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background-color: #fff;
    -webkit-border-radius: 45px;
    -moz-border-radius: 45px;
    border-radius: 45px;
    overflow: hidden;
}

    .icon img {
        width: 90px;
        vertical-align: middle;
        margin: auto;
        overflow: hidden;
        text-align: center;
    }

.iconsmall {
    width: 70px;
    height: 70px;
    margin: 0 auto;
    padding: 0;
    text-align: center;
    background-color: #fff;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    overflow: hidden;
}

    .iconsmall img {
        vertical-align: middle;
        margin: auto;
        padding: 20px;
        overflow: hidden;
        text-align: center;
    }

.notification, .notificationadmin {
    display: none;
    color: #bf0165;
}

.head .badge {
    padding: 0;
}

.nav-pills.head .active a .badge {
    background-color: transparent;
    color: #fc0;
}

.nav-pills.head a .badge {
    background-color: transparent;
    color: #fc0;
}

.badge.notification {
    display:block;
    background-color: #bf0165;
    color: #fff;
    margin-left: -10px;
    margin-right: 0px;
    padding: 4px;
    font-size: 0.7rem !important;
    transform: translate(50%, -50%);
}

.badge.notificationadmin {
    font-size: 0.7rem !important;
    font-weight: bold;
    padding: 4px;
    background-color: #f5993e;
    color: #fff;
    margin-left: -10px;
    margin-right: 0px;
    padding: 4px;
    transform: translate(50%, -50%);
    display: block;
}

#tools .glyphicon-comment {
    position: relative;
}

#tools .notification {
    font-family: 'Unilever DIN Offc Pro Bold','Segoe UI',Arial, sans-serif;
    font-size: 14px;
    position: absolute;
    top: 8px;
    left: 8px;
    background: transparent;
}

.menudropdown {
    font-size: 14px;
    color: #333;
    border-radius: 4px;
    border-top-width: 2px;
}

fieldset {
    margin-top: 10px;
}

.list-attachment ul, .list-attachment a, .list-attachment .small {
    font-family: 'Segoe UI',Helvetica,Arial,sans-serif;
}

.list-attachment span.small {
    color: #666;
}

.list-attachment li div {
    margin-bottom: 5px;
}

.list-attachment label {
    margin-right: 20px;
}

hr.thin {
    margin: 10px 0;
}

.searchresult .h4 {
    margin-bottom: .2em;
}

    .searchresult .h4 a {
        color: #444;
    }

        .searchresult .h4 a:hover {
            color: #007dbb;
        }

.searchresult dd {
    margin-bottom: 1em;
}

.nowrap {
    white-space: nowrap;
}

.date {
    font-size: .7em;
    margin-left: 20px;
}

table.table .icon {
    width: 1em;
}

table.table .date {
    width: 6em;
}

table.table .datetime {
    width: 9em;
}

.thread li {
    background-color: #ecf0f1;
}

.thread blockquote {
    font-size: 1em;
    border-color: #f5993e;
    margin-bottom: 10px;
}

.thread .blockquote-reverse {
    border-color: #37adc8;
    text-align: left;
    padding: 10px;
}

#pnPreview h3 {
    text-transform: none;
    margin-bottom: 10px;
}

#pnPreview .thread img {
    float: none;
    display: block;
    margin: 10px auto;
    max-width: 100%;
    cursor: pointer;
}

#zoomImg {
    max-width: 100%;
}

#zoomModal .modal-dialog {
    width: 90%;
}

#zoomModal .modal-header {
    border-bottom: none;
}

.lead {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 20px;
}

.bodytext {
    margin: 0 20px 0 0;
}

    .bodytext ul li,
    .bodytext ol li {
        margin-bottom: 1em;
    }

.aside {
    min-width: 25%;
}

    .aside h3 {
        margin-bottom: 10px;
        color: #999;
    }

.doclist li .h2, .tools li .h1 {
    margin: 0;
}

.doclist li .link {
    vertical-align: top;
    -ms-word-wrap: break-word;
    word-wrap: break-word;
}

.doclist li .glyphicon {
    color: #666;
}

    .doclist li .glyphicon.xls, .doclist li .glyphicon.xlsx {
        color: #359f15;
    }

    .doclist li .glyphicon.pdf, .doclist li .glyphicon.xps {
        color: #df2121;
    }

    .doclist li .glyphicon.ppt, .doclist li .glyphicon.pptx, .doclist li .glyphicon.pps, .doclist li .glyphicon.ppsx {
        color: #bf0165;
    }

    .doclist li .glyphicon.doc, .doclist li .glyphicon.docx {
        color: #0165bf;
    }

    .doclist li .glyphicon.zip, .doclist li .glyphicon.rar, .doclist li .glyphicon.tar {
        color: #f5993e;
    }

    .doclist li .glyphicon.jpg, .doclist li .glyphicon.jpeg, .doclist li .glyphicon.png, .doclist li .glyphicon.gif {
        color: #01abbb;
    }

#pg1 {
    margin-top: 10px;
}

.tips {
    padding: 10px;
}

    .tips p {
        margin-bottom: 0;
    }

ol.tips {
    padding: 0;
    font-size: 0.9em;
}

    ol.tips h6 {
        margin: 0 0 5px 0;
    }

blockquote.help-block {
    font-size: 14px;
}

h4.panel-title .option {
    text-transform: none;
    font-size: 13px;
}

.employeeinfo {
    width: 150px;
    font-size: .85em;
    overflow: hidden;
}

    .employeeinfo h3 {
        font-size: 20px;
    }

    .employeeinfo img {
        width: 150px;
    }

.validation-summary-errors ul {
    list-style-type: square;
}

.validation-summary-errors {
    color: #bf0165;
}

.adminonly {
    display: none;
}

.language {
    text-transform: uppercase;
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    background-color: #899;
    padding: 0 5px;
    width: 30px;
}

.btnlang.nav-pills a, .head.nav-pills a {
    text-transform: uppercase;
    text-align: center;
    background-color: #899;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.btnlang.nav-pills a {
    padding: 7px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}

.h3.nav-pills a:hover, .head.nav-pills a:focus {
    color: #333;
}

.btnlang.nav-pills > li.id.active > a,
.btnlang.nav-pills > li.id > a:hover,
.btnlang.nav-pills > li.id > a:focus,
.language.id.active, .language.id:hover {
    background-color: #b94040;
}

.btnlang.nav-pills > li.en.active > a,
.btnlang.nav-pills > li.en > a:hover,
.btnlang.nav-pills > li.en > a:focus,
.language.en.active, .language.en:hover {
    background-color: #3072aa;
}

.checkboxlist-inline label {
    padding-left: 5px;
    padding-right: 10px;
}

.hero {
    margin: -10px 0 30px 0;
}

.carousel-control {
    width: 10%;
}

    .carousel-control.left,
    .carousel-control.right {
        background: none;
    }

.carousel-inner {
    border-radius: 8px;
}

.carousel-indicators {
    bottom: 10px;
}

    #carousel-headline .carousel-indicators [data-bs-target] {
        width: auto;
        height: auto;
        border: none;
        background: none;
        padding: 0;
        margin: 0 5px;
        text-indent: 0;
        opacity: 1;
        transition: all 0.3s ease;
    }

        #carousel-headline .carousel-indicators [data-bs-target] img {
            width: 20px; /* sesuaikan */
            height: 20px;
            object-fit: contain;
        }

    #carousel-headline .carousel-indicators .active {
        background-color: #fff;
        padding: 10px;
        border-radius: 100%;
    }

#carousel-headline .col1 ul li:before {
    content: "" !important;
}

.col3 ul li:before {
    content: "●" !important;
}

.banner {
    margin: 0;
    padding: 20px 100px;
    min-height: 200px;
    cursor: pointer;
}

.bannereditor .k-editor {
    margin: 0;
    padding: 5px;
    max-width: 1200px;
    height: 300px;
}

.banner a {
    color: inherit;
}

.banner h2, .banner h3, .bannereditor .k-editor h2, .bannereditor .k-editor h3 {
    font-family: 'Unilever Illustrative Type', 'Segoe UI',Arial, sans-serif;
    font-size: 2.4em;
    line-height: 1em;
    margin: 5px 0;
}

#carousel-headline {
    background-color: #e9e6e6;
    border-radius: 8px;
    height: 200px;
    padding: 0 20px 20px;
}

    #carousel-headline .carousel-indicators {
        margin: 10px 0 0;
        overflow: auto;
        position: static;
        text-align: center;
        white-space: nowrap;
        width: 100%;
    }

        #carousel-headline .carousel-indicators li {
            background-color: transparent;
            border: none;
            display: inline-block;
            height: auto;
            margin: 0 !important;
            width: auto;
        }

            #carousel-headline .carousel-indicators li img {
                display: block;
                border-radius: 30px;
                background-color: transparent;
                padding: 10px;
                width: 40px;
                height: 40px;
            }

            #carousel-headline .carousel-indicators li.active img {
                background-color: #fff;
            }

            #carousel-headline .carousel-indicators li img:hover {
                background-color: #f2f2f2;
            }

    #carousel-headline .carousel-outer {
        position: relative;
        height: 124px;
    }

.headline {
    margin: 0;
}

    .headline h2 {
        font-size: 18px;
    }

    .headline h3 {
        font-family: 'Unilever Illustrative Type','Segoe UI',Arial, sans-serif;
        letter-spacing: 0;
        line-height: 16px;
        margin: 10px 0 0 0;
        font-size: 16px;
    }

    .headline .text-muted {
        color: #555;
        font-size: 10px;
        line-height: 10px;
        padding: 0;
        margin: 0;
    }

.avatar {
    max-width: 156px;
    overflow: hidden;
}

    .avatar h4 {
        text-align: center;
        margin-top: 8px;
    }

.navbar {
    background-color: transparent;
    border: none;
}

    .navbar .container {
        height: 140px;
        -webkit-transition: all 0.3s;
        -moz-transition: all 0.3s;
        -o-transition: all 0.3s;
        transition: all 0.3s;
    }

        .navbar .container.shrink {
            margin-top: -40px;
        }

.navbar-brand img {
    width: 160px;
}

.navbar-header {
    width: 100%;
}

.navbar-fixed-top {
    background-color: #f3f3f3;
}

.navbar-header h1 {
    color: #007dbb;
    margin: 0;
    padding-top: 15px;
    line-height: 30px;
    font-size: 30px;
}

.navbar-header .row {
    position: relative;
}

.admin .navbar {
    background-color: #fff;
}

    .admin .navbar .container {
        background: none;
    }

#headertool {
    display: block;
    position: absolute;
    top: 5px;
    right: 20px;
}

.username, .login {
    white-space: nowrap;
}

.searchoption button {
    font-size: 14px;
}

.body-content {
    margin-top: 110px;
    padding-top: 10px;
}

.admin .body-content {
    margin-top: 150px;
}

.logo {
    display: block;
}

.nav-menu {
    padding: 0 10px 20px 10px;
    display: none;
}

.sidebar {
    background-color: #00A8DD;
    text-align: center;
    z-index: 1200;
    display: none;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
    transition-property: width;
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

    .sidebar a {
        color: #eee;
    }

.sidebar-header {
    padding: 10px;
    background-color: #00A8DD; /*#b7b7b7;*/
    height: 140px;
}

    .sidebar-header a {
        color: #fff;
    }

.sidebar-body {
    padding: 10px;
}

.sidebar .widget li {
    max-width: 230px;
}

.sidebar-icontainer > .widget > li {
    margin-bottom: 15px;
}

.widget > li > a > div {
    padding-left: 50px;
    min-height: 30px;
    text-align: left;
}

.nav-pills .widget {
    padding: 10px;
    margin-right: 20px;
    border-radius: 15px;
    width: 30px;
    height: 26px;
    cursor: pointer;
}

    .nav-pills .widget:hover {
        height: 40px;
    }

.jqx-fill-state-hover,
.jqx-tree-item-hover {
    background-color: #b7b7b7;
    color: #fff;
}

.wgHamburger {
    background: url("../../Content/themes/img/wg-hamburger.png") no-repeat;
}

.wgInbox {
    background: url("../../Content/themes/img/wg-inbox.png") no-repeat;
}

.wgPin {
    background: url("../../Content/themes/img/wg-pin.png") no-repeat;
}

.wgED {
    background: url("../../Content/themes/img/wg-employeedirectory.png") no-repeat;
}

.wgPDC {
    background: url("../../Content/themes/img/wg-pdc.png") no-repeat;
}

.wgMenu {
    background: url("../../Content/themes/img/wg-menu.png") no-repeat;
}

.wgReference {
    background: url("../../Content/themes/img/wg-referenceletter.png") no-repeat;
}

.wgAdmin {
    background: url("../../Content/themes/img/wg-administrator.png") no-repeat;
}

    .wgAdmin.active {
        background: url("../../Content/themes/img/wg-administrator-active.png") no-repeat;
    }

.wgHRBP {
    background: url("../../Content/themes/img/wg-hrbp.png") no-repeat;
}

.wgPE {
    background: url("../../Content/themes/img/wg-pe.png") no-repeat;
}

.wgPO {
    background: url("../../Content/themes/img/wg-po.png") no-repeat;
}

.wgDS {
    background: url("../../Content/themes/img/wg-ds.png") no-repeat;
}

.wgHRVP {
    background: url("../../Content/themes/img/wg-hrvp.png") no-repeat;
}

.wgTA {
    background: url("../../Content/themes/img/wg-ta.png") no-repeat;
}

.wgTD {
    background: url("../../Content/themes/img/wg-td.png") no-repeat;
}

.wgPayroll {
    background: url("../../Content/themes/img/wg-payroll.png") no-repeat;
}

.wgSpecialist {
    background: url("../../Content/themes/img/wg-specialist.png") no-repeat;
}

.wgChat {
    background: url("../../Content/themes/img/wg-chat.png") no-repeat;
}

    .wgChat.active {
        background: url("../../Content/themes/img/wg-chat-new.png") no-repeat;
    }

.wgPin.active {
    width: 30px;
    height: 30px;
    background-color: #005eb8;
    background-size: 80%;
    background-position: center;
    padding: 10px;
    border-radius: 20px;
}

    .wgPin.active:hover {
        height: 30px;
    }

.body-content .title {
    border-bottom: dotted 1px #999;
    margin-bottom: 20px;
}

.title .icon {
    margin-right: 10px;
}

.title .icon {
    display: inline-block;
    vertical-align: top;
    margin-bottom: 10px;
    text-align: center;
    line-height: 90px;
}

.icon-menu .icon {
    line-height: 90px;
}

.title h2 {
    display: inline-block;
    max-width: 300px;
    font-size: 26px;
    line-height: 26px;
}

ul.nav-icon {
    width: 100%;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    line-height: 1.2em;
}

    ul.nav-icon li {
        display: inline-block;
        vertical-align: top;
        width: 159px;
        height: 159px;
    }

        ul.nav-icon li .icon {
            margin: 0 auto 10px;
            width: 90px;
            line-height: 90px;
            text-align: center;
        }

.icon h4 {
    font-size: 14px;
    font-weight: normal;
    display: inline-block;
    vertical-align: middle;
    line-height: 1em;
    font-family: 'claire_handregular','Unilever Illustrative Type','Segoe UI',Arial, sans-serif;
    letter-spacing: 0;
}

@media (min-width: 1060px) {
    .sidebar {
        position: fixed;
        width: 50px;
        display: block;
        top: 0;
        bottom: 0;
        overflow: hidden;
    }

    .sidebar-icontainer {
        width: 300px;
        height: 900px;
    }

    .sidebar-ocontainer {
        position: relative;
        overflow: hidden;
    }

    .sidebar-ocontainer {
        position: absolute;
        left: 0;
        overflow-x: hidden;
        overflow-y: scroll;
    }

        .sidebar-ocontainer::-webkit-scrollbar {
            display: none;
        }

    .sidebar:hover,
    .sidebar.active {
        width: 300px;
        -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.5);
        box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    }
}

@media (min-width: 1200px) {
    .imgLogo {
        background: url("../../Content/themes/img/logo-hr-portal.png") no-repeat;
        background-size: contain;
        width: 329px;
        height: 90px;
        padding-left: 329px;
    }
}

#btnPaste {
    display: none;
}

.deleted td {
    text-decoration: line-through;
    color: #aaa;
}

.letterpage {
    width: 21.59cm;
    height: 27.94cm;
    display: block;
    margin: 0 auto;
    margin-bottom: 0.5cm;
    box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 1px;
    background: url("../../Content/themes/img/draft.png");
}

.letterbody {
    margin: 5cm 2.5cm 2.5cm 2.5cm;
}

.letterpage h3,
.letterpage h4 {
    font-weight: bold;
    text-align: center;
}

.letterpage h3 {
    font-size: 20px;
    margin: 0;
}

.letterpage h4 {
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 4em;
}

.letterpage p {
    margin: 1em 0;
}

.strong {
    font-weight: bold;
}

.manager {
    text-decoration: underline;
}

.message {
    text-align: center;
    padding: 10px;
    font-size: 1.2em;
}

.admin .letterpage {
    background: none;
}

.col3 ul,
.col3 ol {
    column-count: 3;
    margin-top: 10px;
    min-height: initial;
}

.col3 ul, .col1 ul {
    padding: 0;
    list-style-type: none;
}

    .col3 ul li:before,
    .col1 ul li:before {
        font-family: 'Glyphicons Halflings';
        content: '\e080';
        font-size: 80%;
        padding-right: 5px;
        vertical-align: top;
        color: #37adc8;
    }

    .col3 ul li {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 20px;
    }

    .col1 ul li {
        margin-top: 5px;
        line-height: 18px;
    }

.feedback {
    height: 200px;
    background: #c9efff;
    padding: 12px 13px;
    border-radius: 5px 5px 5px 0px;
}

    .feedback textarea {
        margin: 10px 0;
        width: 360px;
    }

.emoscale {
    vertical-align: bottom;
}

.emo {
    width: 30px;
    height: 30px;
    float: left;
    margin: 5px;
    cursor: pointer;
}

    .emo:hover {
        zoom: 112%;
        margin: 3px;
        transition-duration: 0.1s;
        transition-timing-function: ease;
    }

.emo1 {
    background: url("../../Content/themes/img/wg-emo1.png") no-repeat;
}

    .emo1:hover, .emo1:active, .emo1.active {
        background: url("../../Content/themes/img/wg-emo1-on.png") no-repeat;
    }

.emo2 {
    background: url("../../Content/themes/img/wg-emo2.png") no-repeat;
}

    .emo2:hover, .emo2:active, .emo2.active {
        background: url("../../Content/themes/img/wg-emo2-on.png") no-repeat;
    }

.emo3 {
    background: url("../../Content/themes/img/wg-emo3.png") no-repeat;
}

    .emo3:hover, .emo3:active, .emo3.active {
        background: url("../../Content/themes/img/wg-emo3-on.png") no-repeat;
    }

.emo4 {
    background: url("../../Content/themes/img/wg-emo4.png") no-repeat;
}

    .emo4:hover, .emo4:active, .emo4.active {
        background: url("../../Content/themes/img/wg-emo4-on.png") no-repeat;
    }

.emo5 {
    background: url("../../Content/themes/img/wg-emo5.png") no-repeat;
}

    .emo5:hover, .emo5:active, .emo5.active {
        background: url("../../Content/themes/img/wg-emo5-on.png") no-repeat;
    }

.panel-body .tooltip-inner {
    background-color: #6BA542
}

.panel-body .tooltip.top .tooltip-arrow {
    border-top-color: #6BA542
}

.panel-body .tooltip.top-left .tooltip-arrow {
    border-top-color: #6BA542
}

.panel-body .tooltip.left .tooltip-arrow {
    border-left-color: #6BA542
}

.panel-body .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #6BA542
}

.panel-body .tooltip.bottom-left .tooltip-arrow {
    border-bottom-color: #6BA542
}

.panel-body .tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #6BA542
}

.process-flow .tooltip-inner {
    background-color: #00a8dd
}

.process-flow .tooltip.top .tooltip-arrow {
    border-top-color: #00a8dd
}

.process-flow .tooltip.top-left .tooltip-arrow {
    border-top-color: #00a8dd
}

.process-flow .tooltip.left .tooltip-arrow {
    border-left-color: #00a8dd
}

.process-flow .tooltip.bottom .tooltip-arrow {
    border-bottom-color: #00a8dd
}

.process-flow .tooltip.bottom-left .tooltip-arrow {
    border-bottom-color: #00a8dd
}

.process-flow .tooltip.bottom-right .tooltip-arrow {
    border-bottom-color: #00a8dd
}

.active .tooltip-inner {
    background-color: #aa66dd;
}

.tooltip.top.active .tooltip-arrow {
    border-top-color: #aa66dd
}

.tooltip.top-left.active .tooltip-arrow {
    border-top-color: #aa66dd
}

.tooltip.top-right.active .tooltip-arrow {
    border-top-color: #aa66dd
}

.tooltip.right.active .tooltip-arrow {
    border-right-color: #aa66dd
}

.tooltip.left.active .tooltip-arrow {
    border-left-color: #aa66dd
}

.tooltip.bottom.active .tooltip-arrow {
    border-bottom-color: #aa66dd
}

.tooltip.bottom-left.active .tooltip-arrow {
    border-bottom-color: #aa66dd
}

.tooltip.bottom-right.active .tooltip-arrow {
    border-bottom-color: #aa66dd
}

.process-flow {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: dotted 1px #999;
}

    .process-flow .tooltip {
        position: relative;
        display: inline-block;
        margin: 10px 0;
        opacity: 1;
        font-size: 14px;
        z-index: 100;
    }

    .process-flow .tooltip-inner {
        white-space: nowrap;
        max-width: none;
    }

.modal-dialog,
.modal-content {
    box-shadow: 0 0 14px 1px rgba(0,0,0,.2);
}

tr.activetask td {
    background-color: #ffdddd;
}

.ticket {
    font-weight: bold;
    color: #bf0165;
}

#iconChat {
    position: relative;
}

#boticon {
    width: 90px;
    height: 74px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: url("img/wg-help.png");
    background-size: 90px 74px;
    background-repeat: no-repeat;
    cursor: help;
}

.intro {
    background-color: #00A8DD;
    color: #fff;
}

.intro-content p {
    font-size: 18px;
}

.modal-content .intro-content h2 {
    font-size: 28px;
    color: #fff;
}

.text-number,
.decimal {
    width: 10em;
    text-align: right;
}

.form-inline .form-control.text-number,
.form-inline .form-control.decimal {
    width: 5em;
}

.text-bold {
    font-weight: bold;
}

.text-uppercase {
    text-transform: uppercase
}

.space {
    margin: 0 1em;
}

.bigred {
    color: #f30;
    font-size: 2em;
    line-height: .2em;
    font-weight: bold;
}

.nav.nav-pills {
    overflow: hidden;
}

.toggle-menu {
    display: inline-block;
    cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
    width: 20px;
    height: 2px;
    margin: 6px 0;
    transition: 0.4s;
    background-color: #fff;
}

.show .bar1 {
    transform: translate(0, 8px) rotate(-45deg);
}

.show .bar2 {
    opacity: 0;
}

.show .bar3 {
    transform: translate(0, -8px) rotate(45deg);
}

/* .sidebar-wrap:hover, */
.sidebar-section {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    z-index: 100;
}

.sidebar-wrap {
    width: 55px; /* default width saat collapse */
    transition: width 0.3s ease;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 100;
}

    .sidebar-wrap.hold {
        width: 250px; /* expand width */
    }

main {
    /* Pastikan main tidak terpengaruh sidebar */
    width: 100%;
}

.sidebar-hold-btn .fa-bars {
    display: block;
}

.sidebar-wrap:hover ul,
.sidebar-wrap.hold ul {
    overflow-y: auto;
}

.sidebar-wrap:hover .logo-wrap img,
.sidebar-wrap.hold .logo-wrap img {
    display: flex;
}

.sidebar-wrap:hover .nav li .nav-link span,
.sidebar-wrap.hold .nav li .nav-link span {
    display: flex;
}

.sidebar-wrap:hover .dropdown-wrap strong,
.sidebar-wrap.hold .dropdown-wrap strong {
    display: flex;
}

.sidebar-wrap:hover .dropdown-wrap::after,
.sidebar-wrap.hold .dropdown-wrap::after {
    display: inline-block;
}

.sidebar-wrap:hover .dropdown-wrap,
.sidebar-wrap.hold .dropdown-wrap {
    justify-content: flex-start;
}

.sidebar-wrap .logo-wrap {
    font-size: 35px;
    display: none;
    align-items: center;
    gap: 10px;
}

    .sidebar-wrap .logo-wrap span {
        font-size: 18px;
    }

    .sidebar-wrap .logo-wrap .icon-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        min-width: 40px;
    }

.sidebar-wrap .nav {
    height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    flex-wrap: nowrap;
}

    .sidebar-wrap .nav::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 5px;
        background-color: #f5f5f5;
    }

    .sidebar-wrap .nav::-webkit-scrollbar {
        width: 5px;
        background-color: #f5f5f5;
        border-radius: 5px;
    }

    .sidebar-wrap .nav::-webkit-scrollbar-thumb {
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        background-color: #9b9b9b;
    }

    .sidebar-wrap .nav li {
        margin-top: 5px;
    }

        .sidebar-wrap .nav li .nav-link {
            color: #fff;
            padding: 0;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

            .sidebar-wrap .nav li .nav-link .icon-wrap {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 40px;
                min-width: 40px;
            }

            .sidebar-wrap .nav li .nav-link span {
                font-size: 14px;
            }

            .sidebar-wrap .nav li .nav-link.active {
                background-color: #0d6efd;
            }

            .sidebar-wrap .nav li .nav-link:hover {
                background-color: #0095c4;
            }

.sidebar-hold-btn {
    cursor: pointer;
}

.height-top-navbar {
    top: 91px;
}

.asset-logo-desktop {
    display: none;
}

.nav-item.close-mobile,
.nav-item.logo-mobile {
    display: flex;
}

/* tablets and up */
@media (min-width: 770px) {
    .sidebar-wrap {
        width: 60px;
        height: 100vh;
        padding: 10px;
        transition: 0.8s;
        color: #000;
        position: relative;
    }

        .sidebar-wrap:hover,
        .sidebar-wrap.hold {
            width: 280px;
        }

    .sidebar-wrap .logo-wrap {
        display: flex;
    }

    .asset-logo-desktop {
        display: block;
    }

    .nav-item.close-mobile,
    .nav-item.logo-mobile {
        display: none;
    }
}

.nav-link {
    cursor: pointer;
}

    .nav-link.active {
        border-bottom: 1px solid #000;
        border-radius: 0;
    }

.text-xs {
    font-size: 0.75rem; /* 12px */
    line-height: 1rem; /* 16px */
}

.text-sm {
    font-size: 0.875rem; /* 14px */
    line-height: 1.25rem; /* 20px */
}

.text-base {
    font-size: 1rem; /* 16px */
    line-height: 1.5rem; /* 24px */
}

.text-lg {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
}

.text-xl {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
}

.text-2xl {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
}

.text-3xl {
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem; /* 36px */
}

.text-4xl {
    font-size: 2.25rem; /* 36px */
    line-height: 2.5rem; /* 40px */
}

.text-5xl {
    font-size: 3rem; /* 48px */
    line-height: 1;
}

.text-6xl {
    font-size: 3.75rem; /* 60px */
    line-height: 1;
}

.text-7xl {
    font-size: 4.5rem; /* 72px */
    line-height: 1;
}

.text-8xl {
    font-size: 6rem; /* 96px */
    line-height: 1;
}

.text-9xl {
    font-size: 8rem; /* 128px */
    line-height: 1;
}

.gap-0 {
    gap: 0px;
}

.gap-x-0 {
    column-gap: 0px;
}

.gap-y-0 {
    row-gap: 0px;
}

.gap-px {
    gap: 1px;
}

.gap-x-px {
    column-gap: 1px;
}

.gap-y-px {
    row-gap: 1px;
}

.gap-0\\.5 {
    gap: 0.125rem; /* 2px */
}

.gap-x-0\\.5 {
    column-gap: 0.125rem; /* 2px */
}

.gap-y-0\\.5 {
    row-gap: 0.125rem; /* 2px */
}

.gap-1 {
    gap: 0.25rem; /* 4px */
}

.gap-x-1 {
    column-gap: 0.25rem; /* 4px */
}

.gap-y-1 {
    row-gap: 0.25rem; /* 4px */
}

.gap-2 {
    gap: 0.5rem; /* 8px */
}

.gap-x-2 {
    column-gap: 0.5rem; /* 8px */
}

.gap-y-2 {
    row-gap: 0.5rem; /* 8px */
}

.gap-3 {
    gap: 0.75rem; /* 12px */
}

.gap-x-3 {
    column-gap: 0.75rem; /* 12px */
}

.gap-y-3 {
    row-gap: 0.75rem; /* 12px */
}

.gap-4 {
    gap: 1rem; /* 16px */
}

.gap-x-4 {
    column-gap: 1rem; /* 16px */
}

.gap-y-4 {
    row-gap: 1rem; /* 16px */
}

.gap-5 {
    gap: 1.25rem; /* 20px */
}

.gap-x-5 {
    column-gap: 1.25rem; /* 20px */
}

.gap-y-5 {
    row-gap: 1.25rem; /* 20px */
}

.gap-6 {
    gap: 1.5rem; /* 24px */
}

.gap-x-6 {
    column-gap: 1.5rem; /* 24px */
}

.gap-y-6 {
    row-gap: 1.5rem; /* 24px */
}

.gap-7 {
    gap: 1.75rem; /* 28px */
}

.gap-x-7 {
    column-gap: 1.75rem; /* 28px */
}

.gap-y-7 {
    row-gap: 1.75rem; /* 28px */
}

.gap-8 {
    gap: 2rem; /* 32px */
}

.gap-x-8 {
    column-gap: 2rem; /* 32px */
}

.gap-y-8 {
    row-gap: 2rem; /* 32px */
}

.gap-9 {
    gap: 2.25rem; /* 36px */
}

.gap-x-9 {
    column-gap: 2.25rem; /* 36px */
}

.gap-y-9 {
    row-gap: 2.25rem; /* 36px */
}

.gap-10 {
    gap: 2.5rem; /* 40px */
}

.gap-x-10 {
    column-gap: 2.5rem; /* 40px */
}

.gap-y-10 {
    row-gap: 2.5rem; /* 40px */
}

.gap-11 {
    gap: 2.75rem; /* 44px */
}

.gap-x-11 {
    column-gap: 2.75rem; /* 44px */
}

.gap-y-11 {
    row-gap: 2.75rem; /* 44px */
}

.gap-12 {
    gap: 3rem; /* 48px */
}

.gap-x-12 {
    column-gap: 3rem; /* 48px */
}

.gap-y-12 {
    row-gap: 3rem; /* 48px */
}

.gap-14 {
    gap: 3.5rem; /* 56px */
}

.gap-x-14 {
    column-gap: 3.5rem; /* 56px */
}

.gap-y-14 {
    row-gap: 3.5rem; /* 56px */
}

.gap-16 {
    gap: 4rem; /* 64px */
}

.gap-x-16 {
    column-gap: 4rem; /* 64px */
}

.gap-y-16 {
    row-gap: 4rem; /* 64px */
}

.gap-20 {
    gap: 5rem; /* 80px */
}

.gap-x-20 {
    column-gap: 5rem; /* 80px */
}

.gap-y-20 {
    row-gap: 5rem; /* 80px */
}

.gap-24 {
    gap: 6rem; /* 96px */
}

.gap-x-24 {
    column-gap: 6rem; /* 96px */
}

.gap-y-24 {
    row-gap: 6rem; /* 96px */
}

.gap-28 {
    gap: 7rem; /* 112px */
}

.gap-x-28 {
    column-gap: 7rem; /* 112px */
}

.gap-y-28 {
    row-gap: 7rem; /* 112px */
}

.gap-32 {
    gap: 8rem; /* 128px */
}

.gap-x-32 {
    column-gap: 8rem; /* 128px */
}

.gap-y-32 {
    row-gap: 8rem; /* 128px */
}

.gap-36 {
    gap: 9rem; /* 144px */
}

.gap-x-36 {
    column-gap: 9rem; /* 144px */
}

.gap-y-36 {
    row-gap: 9rem; /* 144px */
}

.gap-40 {
    gap: 10rem; /* 160px */
}

.gap-x-40 {
    column-gap: 10rem; /* 160px */
}

.gap-y-40 {
    row-gap: 10rem; /* 160px */
}

.gap-44 {
    gap: 11rem; /* 176px */
}

.gap-x-44 {
    column-gap: 11rem; /* 176px */
}

.gap-y-44 {
    row-gap: 11rem; /* 176px */
}

.gap-48 {
    gap: 12rem; /* 192px */
}

.gap-x-48 {
    column-gap: 12rem; /* 192px */
}

.gap-y-48 {
    row-gap: 12rem; /* 192px */
}

.gap-52 {
    gap: 13rem; /* 208px */
}

.gap-x-52 {
    column-gap: 13rem; /* 208px */
}

.gap-y-52 {
    row-gap: 13rem; /* 208px */
}

.gap-56 {
    gap: 14rem; /* 224px */
}

.gap-x-56 {
    column-gap: 14rem; /* 224px */
}

.gap-y-56 {
    row-gap: 14rem; /* 224px */
}

.gap-60 {
    gap: 15rem; /* 240px */
}

.gap-x-60 {
    column-gap: 15rem; /* 240px */
}

.gap-y-60 {
    row-gap: 15rem; /* 240px */
}

.gap-64 {
    gap: 16rem; /* 256px */
}

.gap-x-64 {
    column-gap: 16rem; /* 256px */
}

.gap-y-64 {
    row-gap: 16rem; /* 256px */
}

.gap-72 {
    gap: 18rem; /* 288px */
}

.gap-x-72 {
    column-gap: 18rem; /* 288px */
}

.gap-y-72 {
    row-gap: 18rem; /* 288px */
}

.gap-80 {
    gap: 20rem; /* 320px */
}

.gap-x-80 {
    column-gap: 20rem; /* 320px */
}

.gap-y-80 {
    row-gap: 20rem; /* 320px */
}

.gap-96 {
    gap: 24rem; /* 384px */
}

.gap-x-96 {
    column-gap: 24rem; /* 384px */
}

.gap-y-96 {
    row-gap: 24rem; /* 384px */
}

.menu-item {
    width: 200px;
}

.container-login {
    height: 100%;
}

.menu-container .menu-img-icon {
    width: 100px !important;
}

.menu-container .menu-title {
    font-size: 24px;
}

/*Tablets and below*/
@media screen and (max-width: 768px) {
    /* Banner */
    .banner {
        padding: 20px;
    }
    /*List Menu*/
    .list-menu .menu-item {
        width: 150px;
    }
    /*sidebar*/
    .sidebar-section .nav-menu-item {
        padding-left: 10px;
    }
    .letterpage {
        width: 100%;
    }
    .container-login {
        height: 400px;
    }
    main {
        margin-left: 55px;
    }
}

@media screen and (max-width: 426px) {
    .letterbody {
        margin: 30px 20px;
    }

    .navbar-brand img {
        width: 60px;
    }

    .section-content {
        margin-top: 77px;
    }

    .menu-container .menu-img-icon {
        width: 60px !important;
    }

    .menu-container .menu-title {
        font-size: 14px;
    }
}