@font-face {
    font-family: FontAwesome;
    src: url('/fonts/font-awesome/fonts/fontawesome-webfont.eot'), /*for IE */
    url('/fonts/font-awesome/fonts/fontawesome-webfont.svg'), url('/fonts/font-awesome/fonts/fontawesome-webfont.ttf'); /* for CSS3 browsers */
    font-weight: normal;
    font-style: normal;
}

body {
    padding-top: 50px;
    /*padding-bottom: 20px;*/
}

/* Set padding to keep content from hitting the edges */

.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */

/*input,
select,
textarea,
.select2-container { max-width: 330px; }*/

.custom-search-form .form-control {
    max-width: 680px;
}

.no-search .select2-search--dropdown {
    display: none
}

.select2-container {
    width: 100%;
}

.weight-style {
    font-family: 'Orbitron', sans-serif;
}

/* styles for validation helpers */

.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

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

.validation-summary-valid {
    display: none;
}

.no-left-margin {
    margin-left: 0px !important;
}

.dl-horizontal dd {
    margin-left: 220px;
}

.dl-horizontal dt {
    width: 200px;
}

.accordion-div-pointer {
    cursor: pointer;
}

.hide-link {
    pointer-events: none;
    display: none;
}

.canvas1 {
    display: block;
    padding: 0;
    margin: 0 auto;
    background-color: red;
}

@media (max-width: 1200px) {
    .container {
        margin: 0 50px;
    }

    /*#canvas {
            width: 100%;
            height: auto;
            background-color:red;
        }*/
}

/*! Light */

.light {
    background-color: #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, .8);
    overflow: hidden;
    padding: 0 0 4px;
    width: 40px;
}

    .light span {
        border-radius: 50px;
        display: block;
        height: 30px;
        margin: 4px auto 0;
        opacity: .3;
        width: 30px;
    }

/*! Light colours */

#red {
    background-color: red;
}

#green {
    background-color: #00FF00;
}

/*! Active states */

.light span.active {
    opacity: 2;
}

.light #red.active {
    box-shadow: 0 0 10px red;
}

.light #green.active {
    box-shadow: 0 0 10px green;
}

.bootstrap-datetimepicker-widget table td.weekend {
    color: red;
}

.big {
    font-size: 26px;
}

.no-padding-left {
    padding-left: 0px
}

.no-padding-right {
    padding-right: 0px
}

/*@media (min-width: 768px) {
    #page-wrapper {
        padding: 15px 15px;
    }
}*/

a.secloudlogo {
    background: url(Content/images/SECloud.png) no-repeat top left;
    display: block;
    background-size: 50px;
    text-indent: -9999px; /* hides the link text */
}

/*DataTables Select extensions styling*/
.table > tbody > tr.selected > td,
.table > tbody > tr.selected > th,
.table > tbody > tr > td.selected,
.table > tbody > tr > th.selected,
.table > tfoot > tr.selected > td,
.table > tfoot > tr.selected > th,
.table > tfoot > tr > td.selected,
.table > tfoot > tr > th.selected,
.table > thead > tr.selected > td,
.table > thead > tr.selected > th,
.table > thead > tr > td.selected,
.table > thead > tr > th.selected,
.table-hover > tbody > tr.selected:hover > td,
.table-hover > tbody > tr.selected:hover > th,
.table-hover > tbody > tr:hover > .selected,
.table-hover > tbody > tr > td.selected:hover,
.table-hover > tbody > tr > th.selected:hover {
    background-color: #08C;
}

.additional-details ul {
    list-style: none;
    font-style: italic;
    margin: 15px;
    padding: 0;
}

    .additional-details ul li {
        margin: 0;
        line-height: 2em;
    }

.additional-details label {
    display: inline-block;
    width: 120px;
    padding-right: 10px;
    text-align: right;
    font-style: normal;
    font-weight: bold;
}

.btn-space {
    margin-right: 5px;
    margin-left: 5px;
}

#Rgrid tbody tr:hover {
    background: #6495ED;
    color: white;
}

/*Fixed top window*/
.fixedTop {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.fixedText {
    text-align: center;
    color: white;
    margin: 0;
    padding: 0;
}

.k-grid input.k-checkbox {
    width: 30px;
    height: 30px;
}

.panel {
    margin-bottom: 0px;
    margin-top: 20px;
}

.element.style {
    padding-left: 0px;
    padding-right: 0px;
}

#page-wrapper {
    padding: 0 0px;
    margin: 0 0 0 260px;
}

.swipe-arrow {
    border-left: 10px solid #337ab7;
    height: 100%;
    position: absolute;
    /*position: relative;*/
    left: 255px;
    margin-left: -3px;
    top: 0;
}

.k-grid tbody tr {
    height: 45px;
}





body {
    background: #fafafa;
    padding-top: 0px;
}

p {
    font-size: 1.1em;
    font-weight: 300;
    line-height: 1.7em;
    color: #999;
}

a, a:hover, a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}

.navbar {
    /*padding: 15px 10px;*/
    background: #fff;
    border: none;
    border-radius: 0;
    /*margin-bottom: 40px;*/
    background: rgb(9, 72, 130);
    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.navbar-btn {
    box-shadow: none;
    outline: none !important;
    border: none;
}

.line {
    width: 100%;
    height: 1px;
    border-bottom: 1px dashed #ddd;
    margin: 40px 0;
}

i, span {
    display: inline-block;
}

/* ---------------------------------------------------
    SIDEBAR STYLE
----------------------------------------------------- */
.wrapper {
    display: flex;
    align-items: stretch;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #76abd9;
    color: #fff;
    transition: all 0.3s;
    max-height: calc(100vh - 50px);
    overflow-y: scroll;
    overflow-x: hidden;
}



    /* width */
    #sidebar::-webkit-scrollbar {
        width: 10px;
    }

    /* Track */
    #sidebar::-webkit-scrollbar-track {
        border-radius: 10px;
    }

    /* Handle */
    #sidebar::-webkit-scrollbar-thumb {
        background: rgba(51,122,183,0.6);
        border-radius: 10px;
    }

        /* Handle on hover */
        #sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(51,122,183,0.9);
        }



    #sidebar.active {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
    }

        #sidebar.active .sidebar-header h3, #sidebar.active .CTAs {
            display: none;
        }

.sidebar-header h3 {
    margin-top: 0px;
    margin-bottom: 0px;
}

#sidebar.active .sidebar-header strong {
    display: block;
}

#sidebar ul li a {
    text-align: left;
}

#sidebar.active ul li a {
    padding: 20px 10px;
    text-align: center;
    font-size: 0.85em;
}

    #sidebar.active ul li a i {
        margin-right: 0;
        display: block;
        font-size: 1.8em;
        margin-bottom: 5px;
    }

#sidebar.active ul ul a {
    padding: 10px !important;
}

#sidebar.active a[aria-expanded="false"]::before, #sidebar.active a[aria-expanded="true"]::before {
    top: auto;
    bottom: 5px;
    right: 50%;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
}

#sidebar .sidebar-header {
    padding: 5px;
    background: #76abd9;
}

    #sidebar .sidebar-header strong {
        display: none;
        font-size: 1.8em;
    }

#sidebar ul.components {
    padding: 5px 0;
    border-bottom: 1px solid #47748b;
}

#sidebar ul li a {
    padding: 10px;
    font-size: 1.1em;
    display: block;
}

    #sidebar ul li a:hover {
        color: #76abd9;
        background: #fff;
    }

    #sidebar ul li a i {
        margin-right: 10px;
    }

#sidebar ul li.active > a, a[aria-expanded="true"] {
    color: #76abd9;
    background: #fff;
}


a[data-toggle="collapse"] {
    position: relative;
}

a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
    content: '\e259';
    display: block;
    position: absolute;
    right: 20px;
    font-family: 'Glyphicons Halflings';
    font-size: 0.6em;
}

a[aria-expanded="true"]::before {
    content: '\e260';
}


ul ul a {
    font-size: 0.9em !important;
    padding-left: 30px !important;
    /*background: #76abd9;*/
}

    ul ul a.languageSubmenu:hover {
        font-size: 0.9em !important;
        padding-left: 30px !important;
        background: #76abd9;
    }

ul.CTAs {
    padding: 20px;
}

    ul.CTAs a {
        text-align: center;
        font-size: 0.9em !important;
        display: block;
        /*border-radius: 5px;*/
        margin-bottom: 5px;
    }

a.download {
    background: #fff;
    color: #fff;
}

a.article, a.article:hover {
    background: #76abd9 !important;
    color: #fff !important;
}

#sidebarCollapse {
    /*width: 35px;
    height: 35px;*/
    /*line-height: 35px;*/
    text-align: center;
    background: rgb(120,184,51);
    /*position: absolute;*/
    /*top: 10px;
    right: 10px;*/
    cursor: pointer;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

    #sidebarCollapse:hover {
        background: #fff;
        color: #337ab7;
    }



/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */
#content {
    padding-left: 5px;
    /*min-height: 100vh;*/
    height: calc(100vh - 55px) !important;
    transition: all 0.3s;
}

.navbar-default .navbar-nav > li > a {
    color: #337ab7;
}

    .navbar-default .navbar-nav > li > a:hover {
        color: #fff;
        background: #76abd9;
    }

.navbar {
    margin-bottom: 0px;
}

.panel {
    margin-top: 0px;
}


/* ---------------------------------------------------
    MEDIAQUERIES
----------------------------------------------------- */
@media (max-width: 768px) {
    #sidebar {
        min-width: 80px;
        max-width: 80px;
        text-align: center;
        margin-left: -80px !important;
    }

    a[aria-expanded="false"]::before, a[aria-expanded="true"]::before {
        top: auto;
        bottom: 5px;
        right: 50%;
        -webkit-transform: translateX(50%);
        -ms-transform: translateX(50%);
        transform: translateX(50%);
    }

    #sidebar.active {
        margin-left: 0 !important;
    }

    #sidebar .sidebar-header h3, #sidebar .CTAs {
        display: none;
    }

    #sidebar .sidebar-header strong {
        display: block;
    }

    #sidebar ul li a {
        padding: 20px 10px;
    }

        #sidebar ul li a span {
            font-size: 0.85em;
        }

        #sidebar ul li a i {
            margin-right: 0;
            display: block;
        }

    #sidebar ul ul a {
        padding: 10px !important;
    }

    #sidebar ul li a i {
        font-size: 1.3em;
    }

    #sidebar {
        margin-left: 0;
    }

    #sidebarCollapse span {
        display: none;
    }
}

.smallSeCloudLogo {
    background: url('../Content/images/kemek logo be fono small.png') no-repeat center right;
    display: block;
    height: 50px;
    width: 58px;
    background-size: contain;
}

.NormalSeCloudLogo {
    background: url('../Content/images/KEMEK logo_ant tamsaus fono.png') no-repeat center right;
    display: block;
    height: 88px;
    width: 160px;
    background-size: contain;
}

svg {
    width: 100%;
}

.toggle.btn.btn-primary {
    padding: 0px;
}

.toggle.btn.btn-default.off {
    padding: 0px;
}

.dropdown-menu > li > a:hover {
    background-color: #76abd9;
    color: white;
}

#loading {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    background-color: whitesmoke;
    background-image: url('../Content/images/cloudLoad.gif');
    background-repeat: no-repeat;
    background-position: center;
}

.collapse:not(.show) {
    /*display:block;*/
}

.wrapper {
    /*max-width: calc(100% - 10px);*/
}
#content {
    overflow-y: auto;
}

#content > form{
    width: 95%;
}

#content > .row {
    width: 100%;
}
.dataTables_wrapper {

}

li.show > ul#content3.dropdown-menu {
    max-height: calc(100vh - 55px);
    overflow: auto;
}

.button-reset-icon {
    min-height: 34px;
}


.k-loading-mask {
    background-color: rgba(236, 236, 236, 0.5);
}

.DeviceIcon {

    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.DeviceIconControl {
    width: 15px;
    height: 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.DeviceIconMQTT {
    background-image: url("/Content/images/DeviceIcons/mqtt_small.png");
}
.DeviceIconBoard {
    background-image: url("/Content/images/DeviceIcons/board_small_px.png");
}
.DeviceIconRFid {
    background-image: url("/Content/images/DeviceIcons/rfid_small_px.png");
}
.DeviceIconP2P {
    background-image: url("/Content/images/DeviceIcons/camera_small_px.png");
}
.DeviceIconBarrier {
    background-image: url("/Content/images/DeviceIcons/barrier_small_px.png");
}
.DeviceIconTrafficLight {
    background-image: url("/Content/images/DeviceIcons/trafficLight_small_px.png");
}
.DeviceIconOther {
    background-image: url("/Content/images/DeviceIcons/other_small_px.png");
}

.DeviceIconAdd {
    background-image: url("/Content/images/DeviceIcons/add_small_px.png");
}

.DeviceIconRemove {
    background-image: url("/Content/images/DeviceIcons/remove_small_px.png");
}

.DeviceIconChange {
    background-image: url("/Content/images/DeviceIcons/other_small_px.png");
    margin-right: 5px;
}

#leftSidebar {
    width: 0%;
    transition: 0.5s linear all;
}

#leftSidebar:not(.Unfolded) * {
    display: none;
}

#leftSidebar.Unfolded {
    padding-left: 15px;
    position: relative;
    right: 15px;
    width: 100%;
}

@keyframes leftSidebar {
    0% {
        width: 0%;
    }

    100% {
        width: 100%;
    }
}

.navbar-collapse {
    display: flex;
}

.navbar-collapse .logo {
    margin-right: auto;
    height: 50px;
}

    .navbar-collapse .logo img {
        height: 100%;
        padding: 5px;
    }

.navbar {
    min-height: 50px;
}

.navbar-collapse .dropdown-toggle {
    padding: 10px;
    display: flex;
    align-items: center;
    color: white!important;
}

.navbar-collapse .dropdown-toggle img,
.navbar-collapse .dropdown-toggle div {
    width: 23px;
    height: 23px;
    background-color: white;
}


.navbar-collapse .dropdown-toggle .delivery-weighing {
    -webkit-mask: url("/Content/images/delivery-weighing.png") center/contain;
}

.navbar-collapse .dropdown-toggle .settings {
    -webkit-mask: url("/Content/images/settings.png") center/contain;
}

.navbar-collapse .dropdown-toggle .united-states {
    -webkit-mask: url("/Content/images/united-states.png") center/contain;
}

.navbar-collapse .dropdown-toggle .user {
    -webkit-mask: url("/Content/images/user.png") center/contain;
}

.navbar-collapse .dropdown-toggle .fa-caret-down {
    padding-left: 2px;
}

.navbar-collapse .dropdown-toggle:before {
    right: 10px;
}


.navbar-collapse .show .dropdown-toggle .fa-caret-down:before {
    content: "\f0d8";
}

#sidebar {
    display: flex;
    flex-direction: column;
    background: rgb(9 72 130 / 80%);
}

    #sidebar .sidebar-header {
        margin-top: auto;
        background: rgb(9 72 130 / 0%);
        display: flex;
        justify-content: space-evenly;
    }