img.logo{
    display:inline-block;
    width:35px;

}

.k-grid td.k-state-selected:hover,
.k-grid tr:hover{
    color:#000 !important;
}

.navbar-form {
    margin-top:18px;
}

.error-text{color:coral; font-style:italic;}

.validation-summary-errors > ul {list-style: outside none none;}
.validation-summary-errors > ul > li { display:block;}


textarea{padding:10px; color:#495057; border: 1px solid #ccc }

/* Language */
ul.taal{ min-width:100px;}
ul.taal > li { text-align:right;}

ul.taal .btn-taal:active,
ul.taal .btn-taal:hover{  color: #337ab7; text-decoration:none; }

.btn-taal {
    border-radius: 0;
    font-weight: 300;

    -moz-user-select: none;
    background-image: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    font-size: 12px;
    line-height: 1.42857;
    margin-bottom: 0;
    padding: 0 10px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}


.btn-link, .btn-link:active, .btn-link:focus, .btn-link:hover {
    border-color: transparent;
}
.btn-link, .btn-link.active, .btn-link:active, .btn-link[disabled], fieldset[disabled] .btn-link {
    background-color: transparent;
    box-shadow: none;
}
.btn-link {
    border-radius: 0;
    color: #337ab7;
}

.btn-taal-active{ font-weight:bold;}

.txt-confirm{ font-weight:bold;}

table.tblcolor{width:100%;}
table.tblcolor td{padding:10px 5px 10px 0; vertical-align:top;}

#color-selected{

    display:block;
    width:50px;
    height:50px;
    border: 1px solid #999999;
    border-radius:5px;

    
}
.k-color-value{color:#242a30;}
 .k-colorpicker {
            vertical-align: top;
            margin: 20px 0;
            width:100px;
        }
 .k-colorpicker .k-selected-color{ width:70px;}
  .k-dropdown-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input {padding: 3px;}


.footer{
    /*position: fixed;
    bottom: 0;
    width: 100%;*/
}

/* Terminal Layout*/

#addPLU { cursor:pointer;}

ul.screengroup {
    margin-top:20px auto 25px;
}
ul.screengroup li{
    width:90px;
    height:90px;
    padding:0 5px;
    border:3px solid transparent;
    margin-bottom:5px;
    display:inline-grid;
   
}

ul.screengroup li a{
    color:#fff;
    font-weight:bold; 
    display:inline-block;
    width:100%;
    height:100%;
    padding-top:20px;
  
}

ul.screengroup li a:hover{ text-decoration:none;}
ul.screengroup li.active{border:3px solid #d8850a;}

/*#sortable-horizontal {
        overflow: hidden;
        width: 930px;
        text-align: center;
    }*/

.layout-container{
    width: 700px; 
    background-color:lightgray; 
    margin:0 auto;
}
   #sortable-horizontal img {
    width: 166px;
    margin: 10px 20px 10px 0;
    vertical-align: middle;
    cursor: move;
    }

.placeholder {
        display: inline-block;
        width:100px; 
        height:100px; 
        border: 1px dashed #ddd;
        background-color: #f3f5f7;
        /*margin: 10px 20px 10px 0;*/
        margin:10px 5px 5px;
        vertical-align: middle;
        /*padding-top:42px;*/
        color: #777;
        z-index:10000;
    }


.tooltip {
    opacity: .6;
}

#sortable div{
        background-color:#ffffff; 
        width:100px; 
        height:100px; 
        display:inline-block;
        margin:0 5px 15px;
        text-align:center;
        padding-top:4%;
        cursor:pointer;
        vertical-align:middle;
        padding-left: 5px;
        padding-right:5px;
    }

#sortable div:hover{cursor:pointer;}

#sortable span{
        background-color:transparent; 
        display:inline-block;
        text-align:center;
        cursor:pointer;
        width:100%;
    }



.fancybox-inner body.flat-black{ background-color:#fff !important}




#vending .item,
.rownumber,
.vendingPL,
#vending-IoT .item
 {
        background-color:#d8850a; 
        width:100%; 
        height:45px; 
        display:block;
        margin:0 0 15px;
        text-align:center;
       
        cursor:pointer;
        vertical-align:middle;
        padding-left: 5px;
        padding-right:5px;
        padding-top:15px;
    }



.rownumber{
    width:50px;
    vertical-align: middle;
    padding-top: 15px;
    font-size: 15px;
    font-weight: bold;
    color: #fff;

}

.vendingPL{
    width:50px;
    vertical-align: middle;
    padding-top: 15px;
    font-size: 15px;
    font-weight: bold;
    color: #000;
    background-color:transparent;
}


#vending .item, 
#vending-IoT .item{
  padding: 0;
  background-color: #fff;
  border: 1px solid #8c8c8c;
  border-radius: 3px;
  cursor:pointer;
}



#vending-IoT .pluname,
#vending .pluname{
    background-color:transparent; 
    display:inline-block;
    text-align:center;
    width:83%;
    font-size:11px;
}

#vending-IoT h5,
#vending h5{
    font-size:13px; 
    margin: 6px 0 2px;
}

#vending-IoT .item-empty > .handler,
#vending-IoT .handler,
#vending .item-empty > .handler,
#vending .handler {
        display: inline-block;
        width: 40px;
        border-radius: 3px 0 0 3px;
        background: url('/content/images/handle.png') no-repeat 50% 50% #348fe2;
        padding: 21px 0 5px;
    }


#vending-IoT .item-empty > .handlerDelete,
#vending-IoT .handlerDelete,
#vending .item-empty > .handlerDelete,
#vending .handlerDelete {
        display: inline-block;
        width: 30px;
        border-radius: 0;
        background-image:url('/content/images/trash.png');
        background-repeat:no-repeat;
        background-size: 80%;
        background-position:center center;
        /*padding: 24px 0 0;*/
        padding: 20px 0 0;
}

#vending-IoT .handler:hover,
#vending .handler:hover {
        background-color: #d8850a;  
    }

#vending-IoT .item-empty,
#vending .item-empty{
    background-color:#8c8c8c;
}

#vending-IoT .item-empty > .handler,
#vending .item-empty > .handler{
    background:none;
    background-color:transparent;
}


#vending .emptydroparea {
    width: 100%;
    height: 70px;
    background-color: #ffcc33;
    border-radius: 5px;
    cursor: pointer;
    padding-top:27px;
}


.index__number {
    background-color: #fff !important;
    background-image: none !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    font-weight: 700;
}


.vending-extra-priceline {
  padding: 0;
  background-color: #fff;
  border: 1px dashed #8c8c8c;
  border-radius: 3px;
  cursor:pointer;
  padding: 5px 0;
  vertical-align:middle;
}

#addElement{
    padding: 10px;
border: none;
background-color: transparent;
vertical-align: middle;
font-size: 13px;
}


#vending-IoT .iot-edit-panel{
    margin-left:auto;
    margin-right:auto;
    max-width:60%;
    text-align:left;
}

#vending-IoT .iot-edit-panel .card--title {
    display:block;
    text-align:center;
}

#vending-IoT .rownumber{height:112px;}



#carouselScreen{ width: 700px; background-color:lightblue;  margin:20px auto 25px;}
#carouselScreen .item.active,
#carouselScreen .item.active + .item,
#carouselScreen .item.active + .item  + .item,
#carouselScreen .item.active + .item  + .item + .item,
#carouselScreen .item.active + .item  + .item + .item + .item {
           width: 20%;
           display: block;
           float:left;
        }     


#carouselScreen .item{
}

#carouselScreen .item div{
    width:90px;
    height:90px;
    padding:0 5px;
    border:3px solid red;
   
}


#carouselScreen .item a{
    color:#fff;
    font-weight:bold; 
    display:inline-block;
    width:100%;
    height:100%;
    padding-top:20px;
    font-size:0.92em;
  
}

#carouselScreen .item a:hover{ text-decoration:none;}
#carouselScreen .item div.active{border:3px solid #d8850a;}


.color-display{
     display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
}
 .color-display-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 13px;
}
  .color-display-name:before{
      content: '#';
  }

/*Subscription*/
.subscription-cbDagen, subscription-cbUren{
    margin-right:10px;
}

.cbdayhour{width:125px;}
.cbdayhour + .cbdayhour {
    margin-left:0;
}

.lnkChangeImage{
    display:block;
    margin-top:3px;
    margin-bottom:3px;
    text-align:center;
}

.portrait{ border-radius:50%; max-height:68px;}


table.table-form-reporting{ margin-top:0;}
table.table-form-reporting td { 
    padding: 0 0 8px 0 !important;
    border-top:none !important;

}
table.table-form-reporting td.colleft{
    padding-right:10px !important;
}
table.table-form-reporting td.colright{
    padding-left:10px !important;
}




/*Reporting*/
.widget-stats .stats-number {
    font-size:12px;
    min-height:36px;
}

a.no-style:hover{
    
    text-decoration:none !important;

}


table.table--form{}
table.table--form > tr > td,
table.table--form > tbody > tr > td { 
    padding:10px; 
    vertical-align:top;
}
table.table--form td.col__left {
    text-align:right; 
    padding-top:19px;
}



/*select*/
.merchant-selector {
  position: relative;
  /*Don't really need this just for demo styling*/
}
 
/*To remove button from IE11, thank you Matt */
select::-ms-expand {
     display: none;
}
 
.merchant-selector:after {
  content: '<>';
  font: 13px "Consolas", monospace;
  color: #FFF;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 23%;
  /*Adjust for position however you want*/
  
  top: 5px;
  padding: 0 0 2px;
  border-bottom: 1px solid #FFF;
  position: absolute;
  pointer-events: none;
}
 
.merchant-selector select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  
  display: block;
  width: 100%;
  max-width: 320px;
  height: 28px;
  margin:0;
  padding: 0 14px;
  font-size: 14px;
  color: #FFFFFF;
  background-color: transparent;
  background-image: none;
  border:none;
  border-bottom:1px solid #fff;
  -ms-word-break: normal;
  word-break: normal;
}


.k-icon-custom{
    color:#363940;
}
.k-icon-custom:hover{
    color:#fff;
}
.k-icon-custom + .k-icon-custom{
  margin-left:20px;
}

.row > [class^="col-"] {
    width:100%;
}


/*Operator user groups*/
table > tbody > tr.oug--inactive{ background-color:#EEEEEE; opacity:0.5;}


#importexcel-window .form-control{ padding-top:0; padding-bottom:0;}

.div-margin{display:block;width:100%; min-height:56px;}



/*terminal status (online offline) */
.terminal--online{ color:darkseagreen;}
.terminal--outoforder{ color:#999999; opacity:0.8;}
.terminal--offline{ color:#f64242}



/* Profile */
.profile-image{
    height:100%;
}

.k-state-default > .k-select {
    background-color: #10c4b2;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

h2{
    font-size:20px;
}


/*kiosk*/
.Tbox{
    border:1px solid #999999;
    display:inline-block;
    width:200px;

}


.Tbox__groups{
    list-style:none;
    margin-bottom:25px;
}

  .Tbox__groups li {
        display: inline-block;
        min-width: 50px;
        padding: 10px 25px 10px;
        border: 1px solid #999;
   }

    .Tbox__groups li a{color:#000; font-weight:bold;}

    .Tbox__groups li.first {
        border-radius: 10px 0 0 10px;
    }
    .Tbox__groups li.last {
        border-radius: 0px 10px 10px 0px;
    }

    .Tbox__groups li + li{
        margin-left:-4px;
    }


    .Tbox__groups li:hover,
    .Tbox__groups li:active,
    .Tbox__groups li.active {
        background-color: rgba(100,181,246,1);
        color:#ffffff;
    }

    .Tbox__groups li.active a {
        color: #ffffff;
        text-decoration:none;
    }
        .Tbox__groups li.active a:hover{
            text-decoration:none;
        }


        .Tbox__title {
            display: block;
            margin: 0 0 30px;
            text-align: center;
        }


.Tbox__arrownav{
    margin-bottom:30px;
    text-align:center;
}

.Tbox__arrownav button + button{margin-left:60px;}



.form-horizontal .control-label{
    padding-top:7px;
}

.Tbox__reserve{
    
    text-align:center;
    padding:10px 0;
}

.Tbox__reserve table{
    width:100%;
}

    .Tbox__reserve table > tbody > tr > td,
    .Tbox__reserve table > tbody > tr > th,
    .Tbox__reserve table > tfoot > tr > td,
    .Tbox__reserve table > tfoot > tr > th,
    .Tbox__reserve table > thead > tr > td,
    .Tbox__reserve table > thead > tr > th {
        padding: 5px 15px;
    }

    .Tbox__reserve table td.col__left {
        text-align:right;
        width:50%;
    }

    .Tbox__reserve table td.col__left > label{
        margin-bottom:0;
    }

    .Tbox__reserve table td.col__right {
        text-align:left;
       
    }


    .Tbox__reserve hr {
        max-width: 60%;
        background-color: #212121;
    }


.panel-body-overlay {
    background-color:#999999;
    opacity:0.7;
    position:absolute;
    width:100%;
    height:100%;

    max-width: 362px;
   /* height: 300px;*/
   height:284px;
    display: block;
    z-index: 999;
    border-radius:5px;
}


#endtime{display:inline-block; width:70px;}
.time_unit {
    display:inline-block;
    width: 80px;

}



.icon-background {
    color: #2196F3;
}



/*ddl*/


select.minimal {
    /* styling */
    background-color: white;
    border: thin solid #42A5F5;
    border-radius: 4px;
    display: inline-block;
    font: inherit;
    line-height: 1.5em;
    padding: 0.5em 3.5em 0.5em 1em;
    margin: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), linear-gradient(to right, #ccc, #ccc);
    background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
    background-size: 5px 5px, 5px 5px, 1px 1.5em;
    background-repeat: no-repeat;
    width:100%;
}

    select.minimal:focus {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-image: linear-gradient(45deg, green 50%, transparent 50%), linear-gradient(135deg, transparent 50%, green 50%), linear-gradient(to right, #ccc, #ccc);
        background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 2.5em) 0.5em;
        background-size: 5px 5px, 5px 5px, 1px 1.5em;
        background-repeat: no-repeat;
        border-color: #616161;
        outline: 0;
    }



/*topup*/
.credit__box{ border}
    .credit__box.active {
      background-color: #263238 !important;
    }


/*.sw .toolbar{display:none;}*/


.reservation-node{
    display:inline-block;
    margin-bottom:5px;
    text-align:left;
    font-weight:300;
    padding:20px;
    text-align:center;
    border:1px solid #495057;
    border-radius:4px;
}

.reservation--disabled{
    cursor:not-allowed;
    background-color:#eee;
}

.reservation--active {
    background-color: #2196F3;
}


.reservation--disabled .form-check-input:disabled ~ .form-check-label {
    color: red;
    cursor: not-allowed;
}


.reservation-node .form-check-label {
    font-weight: 300 !important;
    font-size: 11px;
}

  

    .reservation-node input[type="checkbox"],
    .reservation-node input[type="radio"] {
        vertical-align: text-bottom;
        border: 1px solid;
        height: 17px;
        width: 17px;
    }



    .reservation-node input[type="checkbox"],
    .reservation-node input[type="radio"] {
        display: none;
    }

        .reservation-node input[type="checkbox"] label,
        .reservation-node input[type="radio"] label {
            padding-left: 0;
        }

        .reservation-node input[type="checkbox"]:checked + label,
        .reservation-node input[type="radio"]:checked + label {
            cursor: pointer;
            padding-left: 0;
        }

            .reservation-node input[type="checkbox"] + label:hover,
            .reservation-node input[type="checkbox"]:checked + label:hover,
            .reservation-node input[type="radio"] + label:hover,
            .reservation-node input[type="radio"]:checked + label:hover {
                cursor: pointer;
            }

        .reservation-node input[type="checkbox"] + label span,
        .reservation-node input[type="radio"] + label span {
            display: inline-block;
            vertical-align: top;
            width: 17px;
            height: 17px;
            border: 1px solid #999;
            border-radius: 0;
            cursor: pointer;
            margin-right: 5px;
        }

        .reservation-node input[type="checkbox"]:checked + label span::before,
        .reservation-node input[type="radio"]:checked + label span::before {
           content: " ";
            text-align: center;
            padding-left: 16px;
            margin-left: 1px;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAZCAYAAAEnCBwHAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAZtJREFUeNpi/P//PwMyYELmMDMz/2dgYmJKAKkC0v/BqqEcAxANwgABxIhsBlDLBwaYDFDVB7AKkF6Q7N+/fxlBNCO6tQABhCGAYh4DAz8LFgkUI2EWJoDsgrkVGQMEEE4rYIAFlwTUqosM6EbCggWIF4BNRw4WdEmYArjj0CWRA/c/FCegW4dsdAI29wAEEEFv4gtljBRAjEZo8IA0LwTHBjZnYQm2D0j+RA0EUDDiikYkTRga0UMxAU3xf3whizWUYWmdWI0wDBBARIUBFq8ZwLzEQkYUGgCp81A2A0npAFkzFAiS6uz/6DFGkWaiDMCnGSUd4NCcgE8zLCXCkukEUjWjZHjk5EqsZmwFAggfIFYzSnkAKzCRAbzwxAOY0BR/JEUzRoEC1CQAMoRYzSAAEGBkZSYKMiBGwURWmUpG5j0AK4PRwEV6+hgZXwBiAbLLMwosXkCVApUaFlPNAdBcT7LF6CUBsusTSLD4P7kWYysMiTKEWhaTUq0vIEJNAblRSIrvSG5zkN2sIJCiqWIxUbkAi0MSqF1uAAASgbXTlmDcbQAAAABJRU5ErkJggg==');
            background-repeat: no-repeat;
            background-size: auto 8px;
            -webkit-background-position: 0 0;
            -o-background-position: 0 0;
            background-position: 2px 2px;
            -webkit-padding-before: 2px;
        }

.reservation--disabled input[type="checkbox"] + label span,
.reservation--disabled input[type="radio"] + label span {
    border-color:transparent;
}