/* GENERAL */

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-underline-offset: 12px;
}

.otgs-development-site-front-end,
.wpml-ls-statics-footer {
    display: none;
}

/* undefined */

.no-result {
    padding:20px;
    text-align: center;
}

.error-message {
    display:none;
    color:red;
    font-size: 0.875rem;
    font-weight: 400;
    margin-bottom: 20px;
    margin-top: -10px;
}

.warning .error-message {
    display: block;
}

button#apply,
button#reset-reports-filter,
button#reset-activity-filter {
    display: none;
}

#post_update {
    padding: 20px;
}

.page-template-izvjestaji .main-content .content {
    margin: 20px;
    background: #fff;
    padding: 0 20px 40px;
    position: relative;
    border: 1px solid #DFE0EB;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.btn_csv_export {
    position: absolute;
    bottom: 40px;
    left: 170px;
}

#filter-reports > div,
#filter-reports > select {
   width:33%;
   display: inline-block;
}

/* end undefined */

body {
    background-color: #f7f8fc;
    padding: 0;
    margin: 0;
    font-family: 'Mulish';
}

.wrapper {
    width: 100%;
    height: 100%;
}

.box {
    background: rgba(255, 255, 255, 1);
    border-top:1px solid #DFE0EB;    
    border-bottom:1px solid #DFE0EB;
}

.box h3 {
    font-size: 19px;
    line-height: 24px;
    letter-spacing: 0.4px;
    font-weight: 700;
    margin:0;
    color: rgba(37, 39, 51, 1);
}

.left-sidebar {
    max-width: 255px;
    width:100%;
    height: calc(100% - 46px);
    background: rgba(51, 51, 51, 1);
    position:fixed;
    left:-255px;
    transition:all 0.4s ease;
    bottom:0;
    z-index: 1;
}

.admin-bar .left-sidebar {
    height: calc(100% - 92px);
}

.left-sidebar.active {
    left:0;
    transition:all 0.4s ease;
}

.left-sidebar .logo {
    text-align: center;
    padding:8px 0;
    margin-bottom:16px;
}

.left-sidebar .logo svg {
    max-height: 32px;
    height: 100%;
}

.main-content {
    max-width: 100%;
    width: 100%;
    background: #f7f8fc;
    position: relative;
}

.main-content header {
    background: rgba(51, 51, 51, 1);
    height: 46px;
    display: flex;
    justify-content: space-between;
}

.main-content header .menu-icon {
    padding:17px 0 0 19px;
}

.main-content header .menu-icon svg {
    height: 12px;
    width: 18px;
}

.main-content header .user-data {
    color:rgba(255, 255, 255, 1);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    padding: 4px 13px;
    display: flex;
}

.main-content header .user-data .name {
    line-height: 38px;
    margin-right: 12px;
}

.main-content header .user-data .image {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border:1.5px solid #fff;
    height: 36px;
    width: 36px;
    text-align: center;
}

.main-content header .user-data .image img {
    height: 33px;
    width: 33px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    padding: 1.5px;
}

.main-content .content .top {
    padding-top: 40px;
}

.main-dashboard {
    position: relative;
}


/* Dodaj aktivnost */
.main-content .new-activity {
    position: fixed;
    top:2px;
    right:-100%;
    width:100%;
    height:100%;
    transition: all 0.4s ease;
    background: #fff;
    padding:50px 44px 10px 65px;
    z-index: 2;
    overflow-y: auto;
}

.main-content .new-activity .activity-header {
    display: flex;
    justify-content: space-between;
    padding-bottom: 17px;
    border-bottom: 1px solid #DFE0EB;
}

.main-content .new-activity .activity-header h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 48px;
    letter-spacing: 0.3px;
    color: rgba(37, 39, 51, 1);
    margin:0;
}

.main-content .new-activity .activity-header span {
    display: block;
    height:48px;
    width:48px;
    border-radius: 8px;
    border:1px solid #DFE0EB;
    position: relative;
    cursor:pointer;
}

.main-content .new-activity .activity-header span svg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.main-content .new-activity.active {
    right: 0;
    width: 100%;
}

.main-content .open-activity {
    position: fixed;
    bottom:40px;
    right:40px;
    width:56px;
    height:56px;
    background: rgba(239, 65, 53, 1);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}

.main-content .open-activity svg {
    height: 56px;
}

.main-content form {
    padding-top:25px;
}

.main-content form label {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: rgba(132, 134, 142, 1);
    margin-bottom: 14px;
}

.main-content form select,
.main-content form input {
    width:100%;
    margin-bottom:20px;
}



/**************************************
        GENERAL FORM
**************************************/

input {
    border: 1px solid rgba(232, 232, 232, 1);
    padding:15px 18px;
    font-size: 0.875rem;
    line-height: 18px;
    font-weight: 400;
    color: rgba(45, 55, 72, 1);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

input[type=submit],
input[type=button],
button {
    background: rgba(239, 65, 53, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    padding:15px 18px;
    font-size: 0.875rem;
    line-height: 18px;
    font-weight: 400;
    color: #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-family: 'Mulish';
}

select {
    border: 1px solid rgba(232, 232, 232, 1);
    padding:15px 18px;
    font-size: 0.875rem;
    line-height: 18px;
    font-weight: 400;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    color: rgba(132, 134, 142, 1);

}

button#submit {
    cursor: pointer;
}

/* BOXES */

.number-of-employees {
    border:2px solid #DDE2FF;
    background: #fff;
    padding:24px 32px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    max-width: 260px;
    text-align: center;
    margin: 0 auto 20px;
    cursor: pointer;
    transition:all 0.4s ease;
}

.number-of-employees label {
    color: rgba(159, 162, 180, 1);
    font-weight: 700;
    font-size:1.05rem;
    line-height: 24px;
    margin-bottom: 12px;
    transition:all 0.4s ease;
}

.number-of-employees .number {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 50px;
    color: rgba(37, 39, 51, 1);
    transition:all 0.4s ease;
}

.number-of-employees:hover {
    border:2px solid #3751FF;
}

.number-of-employees:hover label,
.number-of-employees:hover .number {
    color: rgba(239, 65, 53, 1);
}

/* Sidebar menu */

.sidebar-menu {
    margin:0;
    padding:0;
}

.sidebar-menu li {
    padding: 0;
    list-style: none;
    position: relative;
}

.sidebar-menu li svg {
    position: absolute;
    top: 0;
    left: 32px;
    z-index: 1;
    bottom: 0;
    margin: auto;
}

.sidebar-menu li a {
    text-decoration: none;
    color: rgba(121, 122, 131, 1);
    font-weight: 400;
    font-size: 1rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    padding:18px 24px 18px 72px;
    display: block;
    position: relative;
    transition: all 0.4s ease;
}

.sidebar-menu li a::before {
    content:'';
    top:0;
    left:0;
    width:3px;
    height: 100%;
    position: absolute;
    background: rgba(221, 226, 255, 1);
    visibility: hidden;
    transition: all 0.2s ease;
}

.sidebar-menu li a:hover {
    background: rgba(54, 55, 56, 1);
    color: rgba(221, 226, 255, 1);
}

.sidebar-menu li a:hover::before {
    visibility:visible;
}

/* caritas-table */ 

.caritas-table {
    padding:24px 0;
    margin-bottom: 25px;
}

.caritas-table h3 {
    padding: 0 14px 20px;
}

.caritas-table .table-head,
.caritas-table .table-content .row-item {
    padding:20px 0;
    position: relative;
}

.caritas-table .table-head .label {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: rgba(132, 134, 142, 1);
}

.caritas-table .table-head .label,
.caritas-table .table-content .row-item > div {
    display: none;
}

.caritas-table .table-content .row-item {
    border-top: 1px solid rgba(223, 224, 235, 1)
}

.caritas-table .table-content .row-item .mobile-data {
    padding-top: 10px;
    display: block;
}

.caritas-table .mobile-data .row {
    display: flex;
    padding:8px 0;
}

.caritas-table .mobile-data .row > div {
    width:50%;
    padding-left: 16px;
}

.caritas-table .mobile-data .row > div.usluga,
.caritas-table .mobile-data .row > div.label {
    font-weight: 400;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: rgba(132, 134, 142, 1);
}


.caritas-table .mobile-data .row > div.usluga {
    color: rgba(37, 39, 51, 1);
    font-weight: 600;
}

.caritas-table .table-content .row-item .edit a {
    text-decoration: none;
    padding: 8px 14px;
    color: rgba(132, 134, 142, 1);
    border: 1px solid rgba(223, 224, 235, 1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
}

/* future-activity */

.future-activity {
    padding:24px 0;
    margin-bottom: 25px;
    position: relative;
}

.future-activity #filter-future-activity {
   display: flex;
   justify-content: center;
}

.future-activity #filter-future-activity button {
    display: none;
}

.future-activity #filter-future-activity > div label {
    display: inline;
    margin:0 4px;
}

.future-activity #filter-future-activity > div input {
    margin:0;
    display: inline;
    max-width: 180px;
}

.future-activity h3 {
    padding: 0 14px 20px;
}

.future-activity .table-head,
.future-activity .table-content .row-item {
    padding:20px 0;
    position: relative;
}

.future-activity .table-content {
    border-bottom: 1px solid rgba(223, 224, 235, 1);
}

.future-activity .table-head .label {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: rgba(132, 134, 142, 1);
}

.future-activity .table-head .label.zaposleni,
.future-activity .table-head .label.services,
.future-activity .table-head .label.trajanje,
.future-activity .table-head .label.status,
.future-activity .table-head .label.edit,
.future-activity .table-content .row-item .zaposleni,
.future-activity .table-content .row-item .services,
.future-activity .table-content .row-item .trajanje,
.future-activity .table-content .row-item .status,
.future-activity .table-content .row-item .edit {
    display: none;
}

.future-activity .table-content .row-item .date,
.future-activity .table-content .row-item .sticenik {
    width:50%;
    display: inline-block;
    padding-left: 16px;
}

.future-activity .table-content .row-item .zaposleni .user-image {
    width:37px;
    height: 37px;
    border-radius: 50%;
    display: inline-block;
    overflow: hidden;
    margin-right: 9px;
    margin-bottom: -10px;
}

.future-activity .table-content .row-item .zaposleni .user-image img {
    height:auto;
    max-width: 100%;
}

.future-activity .table-content .row-item .zaposleni span {
    vertical-align: top;
    display: inline-block;
    padding-top: 8px;
}

.future-activity .mobile-data .label-status span,
.future-activity .table-content .row-item .status span {
    color:#fff;
    background: rgba(39, 174, 96, 1);
    font-size: 11px;
    line-height: 14px;
    letter-spacing: 0.5px;
    font-weight: 700;
    padding:5px 12px;
    text-transform: uppercase;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.future-activity .mobile-data .label-status span.neaktivan,
.future-activity .table-content .row-item .status span.neaktivan,
.future-activity .mobile-data .label-status span.nedostupan,
.future-activity .table-content .row-item .status span.nedostupan {
    background: rgba(235, 87, 87, 1);
}

.future-activity .mobile-data .label-status span.otkazan,
.future-activity .table-content .row-item .status span.otkazan {
    background: rgba(189, 189, 189, 1);
}

.future-activity .table-content .row-item .edit span {
    float:right;
    margin-right: 14px;
}



.future-activity .table-content .row-item div.change {
    position: absolute;
    width:28px;
    height:28px;
    top:16px;
    right:5px;
    text-align: center;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    display: block;
}

.future-activity .table-content .row-item div.change:hover,
.future-activity .table-content .row-item div.change:focus {
    background: rgba(241, 241, 241, 1);
}

.future-activity .table-content .row-item div.change svg {
    height:28px;
}

.future-activity .table-content .row-item div.change .edit-link {
    position: absolute;
    font-size: 0.875rem;
    line-height: 16px;
    color: rgba(29, 31, 33, 1);
    font-weight: 500;
    right: 0;
    top: 0;
    background: #fff;
    text-decoration: none;
    border: 1px solid rgba(222, 228, 238, 1);
    padding: 10px 15px;

}

.future-activity .table-head .label.date,
.future-activity .table-head .label.sticenik {
    width:50%;
    display: inline-block;
    padding-left: 16px;
}


.future-activity .table-content .row-item .date span {
    background: rgba(39, 174, 96, 0.28);
    color: rgba(39, 174, 96, 1);
    font-size: 0.6875rem;
    line-height: 24px;
    font-weight: 700;
    padding:5px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.future-activity .table-content .row-item .sticenik {
    font-weight: 600;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    color: rgba(37, 39, 51, 1);
    

}

.future-activity .table-content .row-item .edit a {
    text-decoration: none;
    padding: 8px 14px;
    color: rgba(132, 134, 142, 1);
    border: 1px solid rgba(223, 224, 235, 1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
}

/* TABS */

.dashboard-tabs {
    background: rgba(255, 255, 255, 1);
}

.dashboard-tabs .tab {
    border-bottom:1px solid #DFE0EB;
    padding:16px 20px 0;
}

.dashboard-tabs.user-tabs .tab {
    padding:0px;
    margin:0 20px;
}

.dashboard-tabs.user-tabs .tab {
    border-top:1px solid #DFE0EB;
}

.tab button {
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 12px 12px;
    transition: 0.3s;
    font-size: 14px;
    line-height: 24px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.6);
    border-radius: 0;
    position: relative;
}

.tab button.active {
    color: rgba(235, 87, 87, 1);
    
}

.tab button:after {
    content:'';
    position: absolute;
    bottom:-2px;
    left:0;
    right:0;
    height: 2px;
    margin:auto;
    width:100%;
    background: rgba(235, 87, 87, 1);
    display: none;
}

.tab button.active:after {
    display: block;
}

.tab button:hover {
    color: rgba(235, 87, 87, 1);
}

.tabcontent {
    display: none;
}

.dashboard-tabs .future-activity h3 {
    display: none;
}

/* END TABS */

/* Login page */

body.page-template-page-login {
    background-color: #fff;
}

.login-form,
.login-graphics {
    width: 100%;
}

.login-graphics {
    padding-top: 74px;
}

.login-graphics img {
    max-height: 200px;
    width: 100%;
    object-fit: cover;
}

.login-form {
    padding:0 15px;
}

#loginform {
    display: flex;
    width:100%;
    flex-direction: column;
}

#loginform .password-reset {
    order: 2;
}

.login-form input {
    width:100%;
}

.login-form input#wp-submit {
    cursor: pointer;
}

.login-form .login-logo {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    margin: auto;
    text-align: center;
    height: 74px;
    background: #fff;
}

.login-form .login-logo img {
    max-height:45px;
    margin-top:14px;
}

.login-form .welcome-message {
    display: none;
    max-width: 350px;
    margin:0 auto;
    text-align: left;
}

.login-form .welcome-message span {
    font-size: 1rem;
    line-height: 20px;
    font-weight: 400;
    color:rgba(45, 55, 72, 1);
}

.login-form .welcome-message h4 {
    font-size: 30px;
    line-height: 38px;
    font-weight: 700;
    color: rgba(26, 32, 44, 1);
    margin: 0;
}

.login-form .password-reset a {
    font-size:1rem;
    line-height: 20px;
    color:  #2F80ED;
    font-weight: 400;
    text-decoration: none;
    padding-left: 5px;
}

.login-form label {
    font-size:1rem;
    line-height: 20px;
    color: rgba(74, 85, 104, 1);
    font-weight: 400;
    display: block;
    margin-bottom:10px;
}

.login-form p {
    margin-top:0px;
}

.login-form .login-remember input {
    width:16px;
    display: inline-block;
    vertical-align: bottom;
}

.login-form .login-submit {
    overflow: hidden;
    position: relative;
    order: 5;
}

.login-form .login-submit:after {
    background: #fff;
    content: "";
    height: 155px;
    left: -75px;
    opacity: 0.2;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    background: #fff;
    z-index: 10;
}

.login-form .login-submit:hover:after {
    left: 120%;
    transition: all 900ms cubic-bezier(0.19, 1, 0.22, 1);
}

.login-form .error-message {
    text-align: center;
}

#loginform {
    margin-top: 16px;
}

#loginform .login-action {
    order:3;
    display: flex;
    width: 100%;
    flex-direction: column;
}

/* Caritas accordion */

.caritas-accordion .accordion-item {
    border: 1px solid rgba(232, 232, 232, 1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding:25px 20px;
    margin-bottom: 24px;
}

.caritas-accordion .accordion-item h4 {
    color: rgba(132, 134, 142, 1);
    font-weight: 700;
    font-size: 1rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    margin:0;
    cursor:pointer;
}

.caritas-accordion .accordion-item .accordion-data {
    padding-top: 20px;
}

.caritas-accordion .accordion-item .accordion-data label {
    color: rgba(132, 134, 142, 1);
    font-weight: 700;
    font-size: 0.875rem;
    line-height: 20px;
    letter-spacing: 0.2px;
    display: block;
}

.caritas-accordion .accordion-item .accordion-data .radio-choice label,
.caritas-accordion .accordion-item .accordion-data .checkbox-choice label {
    display: flex;
    margin-bottom: 10px;
    height: 20px;
    font-weight: 500;
}

.caritas-accordion .accordion-item .accordion-data .radio-choice label input,
.caritas-accordion .accordion-item .accordion-data .checkbox-choice label input {
    width:20px;
}

/* END Caritas accordion */


/* Search Aktivnosti page */

#filter-activity,
#filter-korisnici {
    padding:24px 15px;
    border-top: 1px solid #DFE0EB;
    border-bottom: 1px solid #DFE0EB;
    background: rgba(255, 255, 255, 1);
}

#filter-activity h3,
#filter-korisnici h3 {
    margin:0 0 16px;
}

#filter-activity input,
#filter-activity select,
#filter-korisnici input,
#filter-korisnici select {
    color: rgba(132, 134, 142, 1);
}

/* END Search Aktivnosti page */

/* PAGINATION */

.page-nav {
    display: flex;
    justify-content: end;
    margin-top:20px;
    margin-right:34px;
    position: absolute;
    right: 0;
}

.page-nav .page-numbers {
    display: block;
    width: 32px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    color: rgba(33, 43, 54, 1);
    text-decoration: none;
    margin-left: 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid rgba(223, 227, 232, 1);
    position: relative;
    transition: all 0.4s ease;
}

.page-nav .page-numbers.current,
.page-nav .page-numbers:hover {
    border: 1px solid rgba(235, 87, 87, 1);
    color:rgba(235, 87, 87, 1);
}

.page-nav .page-numbers.prev:hover,
.page-nav .page-numbers.next:hover {
    background: rgba(145, 158, 171, 1);
    border: 1px solid rgba(223, 227, 232, 1);
}

.page-nav .page-numbers svg {
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

/* END PAGINATION */

/* ZAPOSLENI TABLE */

.future-activity.zaposleni-table .table-head .city,
.future-activity.zaposleni-table .table-head .zaposleni,
.future-activity.sticenici-table .table-head .city,
.future-activity.sticenici-table .table-head .zaposleni {
    width: 50%;
    display: inline-block;
    padding-left: 16px;
}

.zaposleni-table .table-head .phone,
.zaposleni-table .table-head .status,
.zaposleni-table .table-head .activity,
.zaposleni-table .table-head .status,
.zaposleni-table .table-content .phone,
.zaposleni-table .table-content .status,
.zaposleni-table .table-content .activity,
.zaposleni-table .table-content .all-activity {
    display: none;
}

.future-activity.zaposleni-table .table-content .city,
.future-activity.zaposleni-table .table-content .zaposleni,
.future-activity.sticenici-table .table-content .city,
.future-activity.sticenici-table .table-content .zaposleni {
    width: 50%;
    display: inline-block;
    padding-left: 16px;
}


/* END ZAPOSLENI TABLE */

/* Zaposleni form edit */

#zaposleni_update {
    margin: 0 20px;
}



/*************************************

            RESPONSIVE

************************************/

@media (min-width: 480px) {
   
    .login-graphics img {
        max-height: 300px;
        height:100%;
    }

}


@media (min-width: 600px) {
   
    .login-graphics img {
        max-height: 400px;
        height:100%;
    }

    .main-content .content .top {
        padding-top: 40px;
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
    }

    .number-of-employees {
        width:100%;
    }

}

@media (min-width: 768px) {

    .wrapper {
        display: flex;
        justify-content: stretch;
    }

    .admin-bar .left-sidebar,
    .left-sidebar {
        position: relative;
        left:0;
        bottom:0;
        height: 100%;
    }

    .left-sidebar .logo {
        padding: 37px 0;
    }

    .left-sidebar .logo svg {
        max-height: 44px;
    }

    .main-content {
        max-width: calc(100% - 255px);
        width: 100%;
        overflow: auto;
    }

    .main-content header {
        height:96px;
        background: #f7f8fc;
        border-top: 2px solid rgba(51, 51, 51, 1);
        justify-content: end;
    }

    .main-content header .menu-icon {
        display: none;
    }

    .main-content header .user-data {
        padding:26px 30px;
    }

    .main-content header .user-data .name {
        color: rgba(37, 39, 51, 1);
        font-size: 0.875rem;
        line-height: 44px;
        font-weight: 600;
        letter-spacing: 0.2px;
    }

    .main-content header .user-data .image {
        height: 44px;
        width: 44px;
        border: 2px solid #DFE0EB;
    }

    .main-content header .user-data .image img {
        height:40px;
        width:40px;
        padding: 2px;
    }

    .main-content .new-activity.active {
        
        width: calc(100% - 255px);
    }

    /* Login page */
    .login-form,
    .login-graphics {
        width: 50%;
    }

    .login-graphics {
        padding-top: 0;
    }

    .login-graphics img {
        max-height: 100%;
    }

    .login-form {
        flex-direction: column;
        /* align-items: center; */
        align-self: center;
    }

    .login-form .login-logo {
        position: relative;
        display: block;
        margin: 0 auto 42px;
    }

    .login-form .login-logo img {
        max-height: 59px;
    }

    .login-form .welcome-message {
        display: block;
        margin-bottom:21px;
    }

    .login-form #loginform {
        max-width: 350px;
        margin:0 auto;
    }

    .login-submit {
        margin:27px 0 0;
    }

    /* END Login page */

    

    .main-content form .two-child,
    .main-content form .item.two-child {
        display: flex;
        justify-content: space-between;
    }

    .main-content form .two-child div,
    .main-content form .item.two-child div {
        width: 32%;
    }

    .main-content #sticenici_insert .two-child .dates .item {
        width:100%;
    }

}

@media (min-width: 1024px) {

    #loginform .password-reset,
    #loginform p.login-remember {
        width:50%;
        display: inline-block;
    }

    #loginform .password-reset {
        text-align: right;
    }

    #loginform .login-action {
        flex-direction: row;
    }

    .main-content .content .top {
        margin:0 20px;
    }

    .number-of-employees {
        margin:0 0 20px;
    }

    /* CARITAS TABLE */

    .caritas-table .table-head .label {
        display: inline-block;
    }

    .caritas-table .table-head .label,
    .caritas-table .table-content .row-item > div {
        display: inline-block;
    }

    .caritas-table .table-content .row-item .mobile-data {
        display: none;
    }

    /* END CARITAS TABLE */

    .dashboard-tabs,
    .future-activity {
        padding: 24px 0;
        margin: 0 20px 24px;
    }

    .dashboard-tabs.box,
    .future-activity.box {
        border:1px solid #DFE0EB;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }

    .dashboard-tabs .future-activity {
        margin:0;
        -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
        border:none;
    }



    /* Future activities */

    .future-activity #filter-future-activity {
        position: absolute;
        top:0;
        right: 20px;
        display: flex;
    }

    .future-activity .table-head .label.date, 
    .future-activity .table-content .row-item .date {
        width:20%;
    }

    .future-activity .table-head .label.sticenik,
    .future-activity .table-content .row-item .sticenik {
        width:20%;
    }

    .future-activity .table-head .label.zaposleni,
    .future-activity .table-head .label.services,
    .future-activity .table-head .label.trajanje,
    .future-activity .table-head .label.status,
    .future-activity .table-head .label.edit,
    .future-activity .table-content .row-item .zaposleni,
    .future-activity .table-content .row-item .services,
    .future-activity .table-content .row-item .trajanje,
    .future-activity .table-content .row-item .status,
    .future-activity .table-content .row-item .edit {
        display: inline-block;

    }

    .future-activity .table-head .label.zaposleni,
    .future-activity .table-content .row-item .zaposleni {
        width:15%;
        font-weight: normal;
    }

    .future-activity .table-head .label.services,
    .future-activity .table-content .row-item .services {
        width:15%;
    }

    .future-activity .table-head .label.trajanje,
    .future-activity .table-content .row-item .trajanje {
        width:10%;
    }

    .future-activity .table-head .label.status,
    .future-activity .table-content .row-item .status {
        width:10%;
    }

    .future-activity .table-head .label.edit,
    .future-activity .table-content .row-item .edit {
        width:10%;
    }

    .future-activity .table-content .row-item div.change,
    .mobile-data {
        display: none;
    }

    .future-activity.sticenici-table .table-head .label.status,
    .future-activity.sticenici-table .table-content .row-item .status {
        width:15%;
    }

    /* END Future activities */

    /* ACTIVITY PAGE */

    #filter-activity,
    #filter-korisnici {
        margin: 25px 20px;
        border: 1px solid #DFE0EB;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        border-radius: 8px;
    }

    #filter-activity #zaposleni-user,
    #filter-activity #sticenik-user,
    #filter-activity #city {
        max-width: 32%;
        
    }

    #filter-activity #sticenik-user {
        margin:0 1.7%;
    }

    /* END ACTIVITY PAGE */

    /* ZAPOSLENI TABLE */

    .zaposleni-table .table-head .phone, 
    .zaposleni-table .table-head .status, 
    .zaposleni-table .table-head .activity, 
    .zaposleni-table .table-head .status,
    .zaposleni-table .table-head .phone, 
    .zaposleni-table .table-head .status, 
    .zaposleni-table .table-head .activity, 
    .zaposleni-table .table-head .status, 
    .zaposleni-table .table-content .phone, 
    .zaposleni-table .table-content .status, 
    .zaposleni-table .table-content .activity,
    .zaposleni-table .table-content .all-activity {
        display: inline-block;
    }

    .future-activity.zaposleni-table .table-content .row-item .zaposleni,
    .future-activity.zaposleni-table .table-head .zaposleni,
    .future-activity.sticenici-table .table-content .row-item .zaposleni,
    .future-activity.sticenici-table .table-head .zaposleni {
        width:20%;
    }

    .future-activity.zaposleni-table .table-content .row-item .city,
    .future-activity.zaposleni-table .table-head .city,
    .future-activity.sticenici-table .table-content .row-item .city,
    .future-activity.sticenici-table .table-head .city {
        width:15%;
    }

    .future-activity.zaposleni-table .table-content .row-item .phone,
    .future-activity.zaposleni-table .table-head .phone,
    .future-activity.sticenici-table .table-content .row-item .phone,
    .future-activity.sticenici-table .table-head .phone {
        width:15%;
    }

    .future-activity.zaposleni-table .table-content .row-item .activity,
    .future-activity.zaposleni-table .table-head .activity {
        width:15%;
        text-align: center;
    }

    .future-activity.zaposleni-table .table-content .row-item .all-activity,
    .future-activity.zaposleni-table .table-head .activity {
        width:15%;
        text-align: center;
    }

    /* END ZAPOSLENI TABLE */

}