html, body {
    padding:0px;
    margin:0px;
    font-family:'Open Sans';
    position:relative;
}

h1 {
    font-weight:100;
}

a.link {
    opacity:0.5;
    font-size:14px;
    text-decoration:none;
    }
a.link:hover {
    text-decoration:underline;
    opacity:1;
    }

nav {
    display:inline;
    }

/* COLS */
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col,
.col-auto, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm,
.col-sm-auto, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md,
.col-md-auto, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg,
.col-lg-auto, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl,
.col-xl-auto {
  position: relative;
  width: 100%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.col-auto {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
}

.col-1 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 8.333333%;
  flex: 0 0 8.333333%;
  max-width: 8.333333%;
}

.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 16.666667%;
  flex: 0 0 16.666667%;
  max-width: 16.666667%;
}

.col-3 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 25%;
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 33.333333%;
  flex: 0 0 33.333333%;
  max-width: 33.333333%;
}

.col-5 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 41.666667%;
  flex: 0 0 41.666667%;
  max-width: 41.666667%;
}

.col-6 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
}

.col-7 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 58.333333%;
  flex: 0 0 58.333333%;
  max-width: 58.333333%;
}

.col-8 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 66.666667%;
  flex: 0 0 66.666667%;
  max-width: 66.666667%;
}

.col-9 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 75%;
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 83.333333%;
  flex: 0 0 83.333333%;
  max-width: 83.333333%;
}

.col-11 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 91.666667%;
  flex: 0 0 91.666667%;
  max-width: 91.666667%;
}

.col-12 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

@media (min-width: 576px) {
  .col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-sm-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-sm-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-sm-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-sm-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-sm-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-sm-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-sm-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-sm-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-sm-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-sm-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-sm-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-sm-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 768px) {
  .col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-md-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-md-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-md-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-md-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-md-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-md-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-md-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-md-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-md-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-md-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-md-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-md-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 992px) {
  .col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-lg-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-lg-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-lg-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-lg-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-lg-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-lg-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-lg-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-lg-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-lg-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-lg-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-lg-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-lg-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-lg-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (min-width: 1200px) {
  .col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
  }
  .col-xl-auto {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }
  .col-xl-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
  }
  .col-xl-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
  }
  .col-xl-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
  }
  .col-xl-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .col-xl-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
  }
  .col-xl-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-xl-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
  }
  .col-xl-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .col-xl-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
  .col-xl-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
  }
  .col-xl-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
  }
  .col-xl-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* DASHBOARD */
#dashboard {
    padding-bottom:30px;
    }

.content {}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    }

.page-heading {}

#dashboard .page-heading > * {
    font-size:14px;
    font-weight:bold;
    text-transform:uppercase;
    opacity:0.5;
    margin:30px 0;
    }

.card-group {
    padding-bottom:20px;
    margin-bottom:30px;

    }

.card-group .row {
    margin-left:-5px;
    margin-right:-5px;
    }

.card-group *[class*="col-"] {
    padding-left: 5px;
    padding-right: 5px;
    }

.card {
    text-align:center;
    margin-bottom:10px;
    padding:30px 20px 0;
    }

.card-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 100%;
    position: absolute;
    top: -20px;
    transform: translateX(-50%);
    }
    .card-icon span:before {
        margin:0;
        font-size:16px;
        margin-left:-1px;
        }

.card-head {}
.card .card-title {
    margin:0;
    font-size:14px;
    font-weight:600;
    }

.card-body {
    padding-bottom:15px;
    }
.card .item-qty {}
.card .item-qty span {
    font-size:34px;
    font-weight:900;
    }

.card-foot {
    border-top: 1px solid rgba(0,0,0,0.1);
    }
    .card-foot .link {
        display:inline-block;
        width:100%;
        padding:7px 10px 11px;
        }

.block-item {
    margin-bottom: 30px;
    }

.block-heading {}

.block-heading > * {
    line-height:20px;
    font-size:24px;
    font-weight:100;
    position:relative;
    margin: 30px 0;
    }
.block-heading > *[class*="icon-"] {
    padding-left:50px;
    }
.block-heading > *[class*="icon-"]:before {
    left:0;
    position:absolute;
    opacity:0.5;
    }

.block {}

.block .btn {
    width:100%;
    }

.card,
.block-item,
.block,
.block .block-head,
.block .block-body,
.block .block-foot,
.block .primary,
.block .custom {
    float:left;
    display:inline-block;
    width:100%;
    }


.block-head {
    padding:0;
}
.inbox .block-head {
    padding:20px 30px 0;
    }
    .block-head .primary .btn {
        font-weight:600;
        }
    .block-head .custom {
        padding-top:20px;
        border-top:1px solid rgba(0,0,0,0.1);
        }

.block-head + .block-body {
    padding:20px 0;
    }

.block-body {
    padding:0 0 20px;
    }
.inbox .block-body {
    padding:20px 30px 20px;
    }

.block-foot {}

.primary {}

.custom {}

.block-head .primary,
.block-head .custom {
    padding-bottom:15px;
    }



ul.item-list {
    padding:0;
    margin:0 -2.5px;
    }
    ul.item-list li.item {
        display:inline-block;
        float:left;
        margin:0 2.5px 5px;
        width: calc(50% - 5px);
        }

.item {}

.card,
.block.inbox {
    border-radius:3px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }


/* BUTTONS */

.btn[class*="icon-"]:before {

    }

.btn {
    line-height: 48px;
    height:50px !important;
    padding: 0 20px;
    display: inline-block;
    border-radius: 3px;
    font-size: 14px;
    text-decoration: none;
    border-width: 1px;
    border-style: solid;
    cursor:pointer;
    }


.btn-secondary {}
.btn-secondary:hover {}

.btn-secondary-outline {}
.btn-secondary-outline:hover {}


/* ELEMENTS */

.btn-mobile-menu {
    float: right;
    display: none;
    padding: 10px;
    line-height: 19px;
    width: 40px;
    height:40px;
    cursor:pointer;
    border-radius:3px;
    text-align:center;
    }

.navigator.top {
    border-bottom: 1px solid #CCCCCC;
    padding: 10px 15px;
    display:inline-block;
    width:100%;
    background-color: #EEEEEE;

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

.navigator.top .logoContainer {
    display:inline-block;
    vertical-align:top;
    margin-right:20px;
    width:250px;
    height:40px;
    }

.navigator.top .logoContainer a {
    display:inline-block;
    }
.navigator.top .logoContainer img {
    max-height:32px;
    max-width:250px;
    display:inline-block;
    margin:4px;
}
.navigator.top .menu {
    display:inline-block;
    vertical-align:top;
}
.navigator.top .menu > .item {
    line-height:20px;
    font-size:13px;
    border-radius:3px;
    display:inline-block;
    background-color: #3A4D58;
    cursor:pointer;
    position:relative;
}
.navigator.top .menu > .item:hover,
.navigator.top .menu > .item.active {
    background-color: #76BD1D;

}

.navigator.top .menu > .item > span,
.navigator.top .menu > .item > a {
    padding: 5px 15px;
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    cursor: pointer;
    line-height: 30px;
}
.navigator.top .menu > .item:hover > span,
.navigator.top .menu > .item.active > span,
.navigator.top .menu > .item:hover > a,
.navigator.top .menu > .item.active > a {
    color: #FFFFFF;
}



.navigator.top .menu > .item.toggleControl > span:after,
.navigator.top .menu > .item.toggleControl > a:after {
    content: "";
    font-family: "Font Awesome 5 Free";
    font-weight:900;
    margin-left:10px;
    font-size:14px;
    position:relative;
    top:-3px;
    line-height:15px;
}
.navigator.top .menu > .item.toggleControl.active > span:after,
.navigator.top .menu > .item.toggleControl.active > a:after {
    content: "";
    top: 3px;
}
.navigator.top .menu > .item.toggleControl.active {
    border-radius:3px 3px 0px 0px;
}

.navigator.top .toggleBlock {
    display:none;
}

.navigator.top .menu > .item.toggleControl.active > .toggleBlock {
    display:block;
    position:absolute;
    z-index:10;
    top:40px;
    min-width:100%;
    border:2px solid #76BD1D;
    border-radius:0px 3px 3px 3px;
}
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item {
    width:100%;
    line-height:20px;
    background-color: #3A4D58;
    display:inline-block;
}
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item:hover {
    background-color: #76BD1D;
}
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item > span,
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item > a {
    padding:10px 20px;
    box-sizing:border-box;
    min-width:100%;
    white-space:nowrap;
    color: #FFFFFF;
    text-decoration:none;
    cursor:pointer;
    display:inline-block;
}

.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item:hover > span,
.navigator.top .menu > .item.toggleControl.active > .toggleBlock > .item:hover > a {
    color: #FFFFFF;
}

.navigator.top .userContainer {
    display:inline-block;
    float:right;
}
.navigator.top .userContainer span {
    line-height: 20px;
    padding: 10px 20px;
    display:inline-block;
}

/* ICONS */

/* .navigator.top .icon-page:before */
*[class*="icon-"]:before {
    font-family: "Font Awesome 5 Free";
    font-weight:bold;
    margin-right:10px;
    }

.icon-page:before {content:"\f24d";}
.icon-user:before {content: "";}
.icon-users:before {content: "";}
.icon-my:before {content: "";}
.icon-setting:before {content: "";}
.icon-system:before {content: "\f013";}
.icon-logout:before {content: "";}
.icon-rating:before {content: "";}
.icon-add:before {content:"\f055";}
.icon-add-alt:before {content:"\f067";}
.icon-user-cog:before {content:"\f4fe";}


.body {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    min-height: calc(100vh - 61px);
}
.hasFooter .body {
    min-height: calc(100vh - 131px);
}
.hasFooter #login-page + div .body {
    min-height: calc(100vh - 70px);
    }

.navigator.side {
    width:270px;
    min-height:100%;
    background-color: #EEEEEE;
    display:block;
    border-right:1px solid #CCCCCC;

    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.navigator.side .menu > .item {
    display:block;
    width:100%;
    box-sizing:border-box;
    line-height:20px;
}

.navigator.side .menu > .toggleControl {
    margin-bottom:10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
    }

.navigator.side .item > span,
.navigator.side .item > a {
    width:100%;
    display:block;
    box-sizing:border-box;
    padding:10px 20px;
    border-bottom:1px solid #CCCCCC;
    color: #3A4D58;
    font-weight:bold;
    font-size:14px;
    text-decoration:none;
}
.navigator.side .item > span {
    font-weight:normal;
    }
.navigator.side .item > a {
    background-color: #FFFFFF;
    color: #3A4D58;
}
.navigator.side .item > a:hover {
    color: #76BD1D;
}

.bodyContent {
    background-color: #FFFFFF;
    flex:1;
}
.bodyContent .heading {
    background-color: #EEEEEE;
    color:#3A4D58;
    display:block;
    font-size:14px;
    line-height:30px;
    padding:5px 20px;
    font-weight:bold;
    border-bottom:1px solid #CCCCCC;
    text-transform:uppercase;
}
.bodyContent .heading:not(:first-child) {
    border-top:1px solid #CCCCCC;
}
.bodyContent form .heading {
    margin:20px -20px;
}


.hasFooter {
    min-height:100vh;
    box-sizing:border-box;
    position:relative;
    padding-bottom:70px;
}
.footer {
    border-top:3px solid #76BD1D;
    background-color: #3A4D58;
    height:70px;
    padding:0 15px;
    position:absolute;
    bottom:0px;
    left:0px;
    right:0px;
    text-align:center;
    color: #FFFFFF;
    font-size:12px;
    line-height:20px;
}
.footer {
    line-height:65px;
}
.footer a {
    color: #FFFFFF;
    text-decoration:none;
}
.footer a:hover {
    text-decoration:underline;
}



/***** DATA TABLE *****/
.dataTable {
    border-collapse: collapse;
    font-size: 14px;
    width: 100%;
    margin-bottom:20px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    }

.dataTable thead th {
    font-weight:bold;
    font-size:13px;
    text-align:left;
    padding:10px;
    border:1px solid #CCCCCC;
    background-color: #EEEEEE;
    border-bottom-width:2px;
}
.dataTable thead th span,
.dataTable thead th a {
    color: #3A4D58;
    text-decoration:none;
}
.dataTable thead th a.sortable:hover {
    text-decoration:underline;
}


.dataTable thead th a.sortable:after {
    content:"";
    display:inline-block;
    width:20px;
    margin-left:5px;
    font-size:12px;
}
.dataTable thead th a.sortable.asc:after {
    content: "";
    font-family: "Font Awesome 5 Free";
}
.dataTable thead th a.sortable.desc:after {
    content: "";
    font-family: "Font Awesome 5 Free";
}
.dataTable tbody td:first-child {
    border-left:1px solid #CCCCCC;
}
.dataTable tbody td:last-child {
    border-right:1px solid #CCCCCC;
}
.dataTable tbody td {
    border-bottom: 1px solid #CCCCCC;
    padding:5px 10px;
}
.dataTable tbody tr:hover {
    /*background-color:rgba(118, 189, 29, 0.2);*/
    background-color:rgba(58, 77, 88, 0.2);
}
.dataTable tbody td > .icon {
    display:inline-block;
    width:19px;
    height:19px;
    vertical-align:top;
    text-decoration:none;
}
.dataTable tbody td > .icon:before {
    content: "";
    display:inline-block;
    /*font-family: FontAwesome;*/
    font-family: "Font Awesome 5 Free";
    font-size:13px;
    line-height:23px;
    background-color: #3A4D58;
    color: #FFFFFF;
    position:relative;
    width:23px;
    height:23px;
    top:-2px;
    left:-2px;
    text-align:center;
    border-radius:3px;

}
.dataTable tbody td > .icon:hover:before {
    background-color: #76BD1D;
    color: #FFFFFF;
}
.dataTable tbody td > .icon.icon-edit:before {
    content: "";
    font-weight:400;
}
.dataTable tbody td > .icon.icon-delete:before {
    content: "";
    font-weight:400;
}
.dataTable tbody td > .icon.icon-clone:before {
  content: "";
  font-weight:400;
}
.dataTable tbody td > .icon.icon-show:before {
    content: "";
    font-weight:900;
}
.dataTable tbody td > .icon.icon-hide:before {
    content: "";
    font-weight:900;
}


.dataTable tbody td > .icon.icon-check-on:before,
.dataTable tbody td > .icon.icon-check-off:before,
.dataTable tbody td > .icon.icon-radio-on:before,
.dataTable tbody td > .icon.icon-radio-off:before {
    background:transparent;
    font-size:20px;
}
.dataTable tbody td > .icon.icon-check-on:before {
    content: "";
    font-weight:400;
}
.dataTable tbody td > .icon.icon-check-off:before {
    content: "";
    font-weight:400;
}
.dataTable tbody td > .icon.icon-radio-on:before {
    content: "";
    font-weight:400;
}
.dataTable tbody td > .icon.icon-radio-off:before {
    content: "";
    font-weight:400;
}

.dataTable tbody td > .icon.icon-check-off:before,
.dataTable tbody td > .icon.icon-check-on:hover:before,
.dataTable tbody td > .icon.icon-radio-off:before,
.dataTable tbody td > .icon.icon-radio-on:hover:before {
    color: #3A4D58;
}
.dataTable tbody td > .icon.icon-check-on:before,
.dataTable tbody td > .icon.icon-check-off:hover:before,
.dataTable tbody td > .icon.icon-radio-on:before,
.dataTable tbody td > .icon.icon-radio-off:hover:before {
    color: #76BD1D;
}

.dataTable tbody td > a {
    font-weight:bold;
    color: #3A4D58;
}


.dataTable tbody td > .lang {
    display:inline-block;
    width:19px;
    height:19px;
    vertical-align:top;
    text-decoration:none;
}
.dataTable tbody td > .lang:after {
    content: "";
    display:inline-block;
    width: 20px;
    height:20px;
    vertical-align:top;
    background-size: 20px 20px;
    background-position: center center;
    background-repeat: no-repeat;
}
.dataTable tbody td > .lang.lang-cs:after {
    background-image: url("../img/countries/cs.png");
}
.dataTable tbody td > .lang.lang-sk:after {
    background-image: url("../img/countries/sk.png");
}
.dataTable tbody td > .lang.lang-en:after {
    background-image: url("../img/countries/en.png");
}
.dataTable tbody td > .lang.lang-de:after {
    background-image: url("../img/countries/de.png");
}
.dataTable tbody td > .lang.lang-fr:after {
    background-image: url("../img/countries/fr.png");
}



.dataTable-filter {
    padding: 10px 20px 0px;
    max-width:50%;
    position:relative;
}
.dataTable-filter form {
    margin:0px;
    padding:0px;
}

.dataTable-filter form label {
    line-height: 20px;
    padding: 10px;
    font-size: 14px;
    box-sizing: border-box;
    width: 40px;
    display: inline-block;
    text-align: center;
    position: absolute;
}
.dataTable-filter form input[type=text] {
    border: 1px solid #CCCCCC;
    height:40px;
    line-height:40px;
    padding:0px 10px;
    padding-left:40px;
    border-radius:3px;
    max-width:300px;
}
.dataTable-filter form input[type=submit] {
    background-color: #3A4D58;
    color: #FFFFFF;
    line-height:23px;
    padding:0px 10px;
    border:0px;
    border-radius:3px;
    cursor: pointer;
    width:auto;

    display:none;
}

.dataTable-filter form input[type=submit]:hover {
    background-color: #76BD1D;
    color: #FFFFFF;
}

.dataTable-pages {
    padding: 0 0 20px;
}
.dataTable-pages label {
    line-height: 15px;
    padding: 4px 5px;
    font-size: 14px;
    box-sizing:border-box;
    width:80px;
    text-align:right;
    display:inline-block;
}
.dataTable-pages .page-item {
    display:inline-block;
    vertical-align:top;
    border-radius:3px;
    line-height:20px;
    width:30px;
    text-align:center;
    padding:5px 10px;
    font-size:12px;
    text-decoration:none;
    background-color: #3A4D58;
    color: #FFFFFF;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.dataTable-pages .page-item:hover,
.dataTable-pages .page-item.active {
    background-color: #76BD1D;
    color: #FFFFFF;
}

div[id*="table1"] {
    display: inline-block;
    width: 100%;
    position: relative;
    padding: 10px 20px;
    }


/***** FORM *****/
form {
    padding:20px 20px 40px;
    font-size:14px;
    overflow:hidden;
}
form .formRow {
    display:block;
    float:left;
    width:100%;
    overflow:hidden;
    margin-bottom:5px;
}


form .formRow > label {
    width:300px;
    box-sizing:border-box;
    display:inline-block;
    vertical-align:top;
    line-height:20px;
    padding:10px;
    font-size:14px;
    text-align:right;
    float:left;
}
form .formRow > input[type=text],
form .formRow > input[type=password],
form .formRow > input[type=checkbox],
form .formRow > input[type=radio],
form .formRow > select,
form .formRow > textarea,
form .formRow > span,
form .formRow > span.colorContainer > input[type=text] {
    width: 300px;
    box-sizing:border-box;
    vertical-align:top;
    float:left;
    text-align:left;
}
form .formRow > span.colorContainer {
    padding:0px;
    position:relative;
}
form .formRow > span.colorContainer > .box {
    position: absolute;
    top: 5px;
    right: 5px;
    display: inline-block;
    width: 30px;
    height: 30px;
    box-shadow: inset 0px 0px 0px 1px rgba(204,204,204,1);
    pointer-events: none;
    }

form .formRow > input[type=text],
form .formRow > input[type=password],
form .formRow > span.colorContainer > input[type=text]{
    border:1px solid #CCCCCC;
    height:40px;
    line-height:40px;
    padding:0px 10px;
    border-radius:3px;
}
form .formRow > textarea {
    border:1px solid #CCCCCC;
    line-height:28px;
    padding:0px 10px;
    border-radius:3px;
}

form .formRow > span {
    height:30px;
    line-height:30px;
    padding:0px 10px;
    font-weight:bold;
}

form .formRow > input[type=checkbox],
form .formRow > input[type=radio],
.sdff-form input[type=checkbox] {
    width: 0px;
    height: 35px;
    margin-right: 0px;
}
form .formRow > input[type=checkbox] + label,
form .formRow > input[type=radio] + label{
    text-align:left;
    width:auto;
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    margin-left: 15px;
}

form .formRow > input[type=checkbox]:before,
.sdff-form input[type=checkbox]:before {
    content: "";
    font-family: "Font Awesome 5 Free";
    display:inline-block;
    font-size:20px;
    vertical-align:top;
    color: #3A4D58;
    margin-top: 6px;
}
form .formRow > input[type=checkbox]:checked:before,
.sdff-form input[type=checkbox]:checked:before {
    content: "";
    font-weight: 900;
    color: #76BD1D;
}

.sdff-form input[type=checkbox] {
  height: auto;
  margin-right: 25px;
  vertical-align:top;
}
.sdff-form input[type=checkbox]:before {
  display: inline;
}
.sdff-form input[type=checkbox]+label {
  line-height: 25px;
}


form .formRow > input[type=radio]:before {
    content: "";
    font-family: "Font Awesome 5 Free";
    display:inline-block;
    font-size:20px;
    vertical-align:top;
    color: #3A4D58;
    margin-top: 6px;
}
form .formRow > input[type=radio]:checked:before{
    content: "";
    font-weight: 900;
    color: #76BD1D;
}


form .formRow > select {
    height:28px;
    line-height:28px;
    padding: 0px 10px;
    border-radius:3px;
    border:1px solid #CCCCCC;
}
form .formRow.croppie > .croppie {
    width:300px;
    display:none;
}
form .formRow.croppie > img {
    margin-bottom:20px;
}
form .formRow > input[type=submit] {
    width: 300px;
    background-color: #3A4D58;
    line-height:20px;
    padding:5px 10px;
    border:0px;
    border-radius:3px;
    color: #FFFFFF;
    cursor:pointer;
}
form .formRow > input[type=submit]:hover {
    background-color: #76BD1D;
    color: #FFFFFF;
}
form .formRow .sdff-form {
    margin:15px 0px;
}
form .formRow.submit,
form .formRow.croppie,
form .formRow.noLabel{
    padding-left: 300px;
}
form .formRow.submit {
    margin-top:10px;
}

form .formRow.language label[class^="lang-"]:after {
    content: "";
    display:inline-block;
    width: 18px;
    height:18px;
    vertical-align:top;
    background-size: 18px 18px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-left:8px;
    /*opacity:0.4;*/
    margin-top:1px;
}
form .formRow.language label.lang-cs:after {
    background-image: url("../img/countries/cs.png");
}
form .formRow.language label.lang-sk:after {
    background-image: url("../img/countries/sk.png");
}
form .formRow.language label.lang-en:after {
    background-image: url("../img/countries/en.png");
}
form .formRow.language label.lang-de:after {
    background-image: url("../img/countries/de.png");
}
form .formRow.language label.lang-fr:after {
    background-image: url("../img/countries/fr.png");
}




.flashMessages {
    display:block;
}
.flashMessages .flash {
    font-size:14px;
    line-height:20px;
    padding:5px;
    text-align:center;
    border-bottom:1px solid #CCCCCC;
    display:none;
}
.flashMessages .flash:before {
    margin-right:10px;
    font-size:20px;
    font-family: "Font Awesome 5 Free";
    vertical-align:top;
}
.flashMessages .flash.success {
    background-color:#76BD1D;
    color:#fff;
}
.flashMessages .flash.success:before {
    content: "";
}
.flashMessages .flash.error {
    background-color:#cc0000;
    color:#fff;
}
.flashMessages .flash.error:before {
    content: "";
    font-weight: 900;
}


.alpha00 { opacity: 0; }
.alpha01 { opacity: 0.1; }
.alpha02 { opacity: 0.2; }
.alpha03 { opacity: 0.3; }
.alpha04 { opacity: 0.4; }
.alpha05 { opacity: 0.5; }
.alpha06 { opacity: 0.6; }
.alpha07 { opacity: 0.7; }
.alpha08 { opacity: 0.8; }
.alpha09 { opacity: 0.9; }




.sdff-form .sdff-form-languages .sdff-form-lang:before {
    content: "";
    display:inline-block;
    width: 18px;
    height:18px;
    vertical-align:top;
    background-size: 18px 18px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-right:10px;
    margin-top:1px;
}

.sdff-form label[class^="lang-"]:before {
    content: "";
    display:inline-block;
    width: 18px;
    height:18px;
    vertical-align:top;
    background-size: 18px 18px;
    background-position: center center;
    background-repeat: no-repeat;
    margin-right:5px;
    /*opacity:0.4;*/
    margin-top:1px;
}

.sdff-form .sdff-form-languages .sdff-form-lang.lang-cs:before,
.sdff-form label.lang-cs:before {
    background-image: url("../img/countries/cs.png");
}
.sdff-form .sdff-form-languages .sdff-form-lang.lang-sk:before,
.sdff-form label.lang-sk:before {
    background-image: url("../img/countries/sk.png");
}
.sdff-form .sdff-form-languages .sdff-form-lang.lang-en:before,
.sdff-form label.lang-en:before {
    background-image: url("../img/countries/en.png");
}
.sdff-form .sdff-form-languages .sdff-form-lang.lang-de:before,
.sdff-form label.lang-de:before {
    background-image: url("../img/countries/de.png");
}
.sdff-form .sdff-form-languages .sdff-form-lang.lang-fr:before,
.sdff-form label.lang-fr:before {
    background-image: url("../img/countries/fr.png");
}


.cmsForm.half,
.cmsForm .half {
    width:49%;
    box-sizing:border-box;
    display:inline-block;
    vertical-align:top;
}
.cmsForm .half {
    float:left;
    margin:0px 0.5%;
}
.cmsForm.half .sdff-form .sdff-form-text > label,
.cmsForm.half .sdff-form .sdff-form-textarea > label,
.cmsForm.half .sdff-form .sdff-form-date > label,
.cmsForm.half .sdff-form .sdff-form-url > label,
.cmsForm.half .sdff-form .sdff-form-enum > label,
.cmsForm.half .sdff-form .sdff-form-condition > label,
.cmsForm.half .sdff-form .sdff-form-autocomplete > label,
.cmsForm.half .sdff-form .sdff-form-autocomplete-multi > label,
.cmsForm.half .sdff-form .sdff-form-html > label,
.cmsForm.half .sdff-form .sdff-form-image > label,
.cmsForm.half .sdff-form .sdff-form-file > label,

.cmsForm .half .sdff-form .sdff-form-text > label,
.cmsForm .half .sdff-form .sdff-form-textarea > label,
.cmsForm .half .sdff-form .sdff-form-date > label,
.cmsForm .half .sdff-form .sdff-form-url > label,
.cmsForm .half .sdff-form .sdff-form-enum > label,
.cmsForm .half .sdff-form .sdff-form-condition > label,
.cmsForm .half .sdff-form .sdff-form-autocomplete > label,
.cmsForm .half .sdff-form .sdff-form-autocomplete-multi > label,
.cmsForm .half .sdff-form .sdff-form-html > label,
.cmsForm .half .sdff-form .sdff-form-image > label,
.cmsForm .half .sdff-form .sdff-form-file > label {
    width: 40%;
}

.cmsForm.half .sdff-form .sdff-form-text > input,
.cmsForm.half .sdff-form .sdff-form-textarea > textarea,
.cmsForm.half .sdff-form .sdff-form-date > input,
.cmsForm.half .sdff-form .sdff-form-url > input,
.cmsForm.half .sdff-form .sdff-form-enum > select,
.cmsForm.half .sdff-form .sdff-form-condition > input,
.cmsForm.half .sdff-form .sdff-form-autocomplete > input,
.cmsForm.half .sdff-form .sdff-form-html > .cke,
.cmsForm.half .sdff-form .sdff-form-image > input,
.cmsForm.half .sdff-form .sdff-form-file > input,

.cmsForm .half .sdff-form .sdff-form-text > input,
.cmsForm .half .sdff-form .sdff-form-textarea > textarea,
.cmsForm .half .sdff-form .sdff-form-date > input,
.cmsForm .half .sdff-form .sdff-form-url > input,
.cmsForm .half .sdff-form .sdff-form-enum > select,
.cmsForm .half .sdff-form .sdff-form-condition > input,
.cmsForm .half .sdff-form .sdff-form-autocomplete > input,
.cmsForm .half .sdff-form .sdff-form-html > .cke,
.cmsForm .half .sdff-form .sdff-form-image > input,
.cmsForm .half .sdff-form .sdff-form-file > input {
    width: 60%;
}


.sdff-form-root {
    border:1px solid #CCCCCC;
}
.sdff-form-languages > .sdff-form-lang {
    background-color: #EEEEEE;
    border:1px solid #CCCCCC;
    border-bottom:0px;
}
.sdff-form-block > label,
.sdff-form-list > label,
.sdff-form-list > div > div > label {
    background-color: #EEEEEE;
    border:1px solid #CCCCCC;
}

.sdff-form-text > input,
.sdff-form-textarea > textarea,
.sdff-form-date > input,
.sdff-form-url > input,
.sdff-form-enum > select,
.sdff-form-condition > input,
.sdff-form-html > .cke {
    border:1px solid #CCCCCC;
}

.sdff-form-autocomplete .lxr-multi-select .item,
.sdff-form-autocomplete-multi .lxr-multi-select .item {
    height:40px;
    margin-bottom:0px;
    padding-top:10px;
    padding-bottom:10px;
}

.sdff-form-autocomplete .lxr-multi-select input,
.sdff-form-autocomplete-multi .lxr-multi-select input {
    margin-bottom:0px;
}

/* design-components */

* {
    box-sizing:border-box;
    }

.sdff-form-text label + input,
.formRow label + input {
    width:300px;
    }

.container {
    width:100%;
    max-width: 1358px;
    margin: 0 auto;
    position:relative;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    }

div.box {
    display:inline-block;
    background-color:#FFF;
    border-width:1px;
    border-style:solid;
    padding:25px;
    box-shadow: 0 2px 20px rgba(0,0,0,0.1);
    }

input {
    border-radius:3px;
    border-width:1px;
    border-style:solid;
    padding:0 10px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.075) inset;
    background-color:#FAFAFA;
    }
    input:not([type="submit"]):hover {
        border-color:#AAA !important;
        }
    input:not([type="submit"]):focus,
    input:not([type="submit"]):active {
        box-shadow:0 0 3px 0 rgba(0,145,255,0.5);
        border-color:rgba(0,145,255,1) !important;
        background-color:#FFF;
        }

input:not([type="checkbox"]),
input:not([type="radio"]) {
    height:40px;
    }

input[type="checkbox"],
input[type="radio"] {
    cursor:pointer;
    width:auto;
    height:auto;
    }

select {
    border-radius:3px;
    border-width:1px;
    border-style:solid;
    padding:0 10px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.075);
    height:40px !important;
    }

label.label {
    opacity: 0.5;
    line-height: 20px;
    display: inline-block;
    margin-bottom: 5px;
    font-size:13px;
    float:left;
    }

#login {
  /*margin-top:10px;*/
    margin-bottom:10vh;
    max-width:320px;
    }

#login-page .navigator.top {
    display:none;
    position:absolute;
    }
#login-page + #snippet--body .container {
    text-align:center;
    }

.logo-container {
    padding-top:10px;
    height:20vh;
    min-height:100px;
    }
.logo-wrapper {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    }
.logo-wrapper img {
    margin:10px;
    max-height: 50px;
    max-width: 400px;
    }

#login h1 {
    font-weight:100;
    font-size:24px;
    }

#login input {
    width: 100%;
    height: 40px;
}
#login input[type="checkbox"], #login input[type="radio"] {
    width: auto;
    height: auto;
}


body > .loading {
    display:none;
}
body.sdff-form-saving > .loading {
    display:block;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
    background:rgba(255,255,255,0.8);
}

body > .loading > .loader {
    animation: loaderAnimation1 1.5s linear infinite;
    clip: rect(0, 80px, 80px, 40px);
    height: 80px;
    width: 80px;
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
}
@keyframes loaderAnimation1 {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(220deg)
    }
}
body > .loading > .loader:after {
    animation: loaderAnimation2 1.5s ease-in-out infinite;
    clip: rect(0, 80px, 80px, 40px);
    content:'';
    border-radius: 50%;
    height: 80px;
    width: 80px;
    position: absolute;
}


/* RESPONSIVE MENU */

@media all and (max-width:1279px) {
    .navigator.top .menu {
        }
    .navigator.top .menu .item *[class*="icon"]:before {
        display:none;
        }
    }

@media all and (max-width:1199px) {
    .navigator.top .logoContainer {
        width:auto;
        }
    .navigator.top .menu {
        }
    }

@media all and (max-width:1023px) {
    .navigator.top {
        padding:0;
        }
    .navigator.top .logoContainer {
        padding:10px 15px;
        height:60px;
        }
    nav {
        display:none;
        }
    .btn-mobile-menu {
        margin:10px 15px;
        display:inline-block;
        }
    .btn-mobile-menu.active + nav {
        display:block;
        }
    .navigator.top .menu {
        width:100%;
        }
    .navigator.top .menu .item *[class*="icon"]:before {
        display:inherit;
        }
    .navigator.top .menu > .item {
        line-height: 20px;
        font-size: 13px;
        border-radius: 0;
        display: inline-block;
        background-color: #3A4D58;
        cursor: pointer;
        position: relative;
        width: 100%;
        }
    .navigator.top .menu > .item * {
        width: 100%;
        }
    .navigator.top .menu > .item.toggleControl.active > .toggleBlock {
        display:inline-block;
        position:relative;
        z-index:10;
        top:0;
        width: 100%;
        border-radius: 0;
        border-right: 0 !important;
        border-left: 0 !important;
        }
    .navigator.top .menu > .item.toggleControl.active {
        border-radius:0;
        }
    .navigator.top .menu > .item.toggleControl > span:after,
    .navigator.top .menu > .item.toggleControl > a:after {
        top:4px;
        float:right;
        }
    .navigator.top .menu > .item.toggleControl.active > span:after,
    .navigator.top .menu > .item.toggleControl.active > a:after {
        top:10px;
        }
    }

/* ONLY FOR Váš Konzultant */

#login-page + div .body .bodyContent {
    background-image:url('/dataAdmin/img/login_bg.jpg');
    background-size:cover;
    background-position:center;
    }