#device_data-temp{
    background: #7f4ead;
    color: white;
}
#device_data-hum{
    background: #009688;
    color: white;
}

body{
    user-select: text !important;
}

#main-logo{
    text-align: center
}

#main-logo>img{
    width: 80%;
}

/*global classes*/

.switched-color-list li:nth-child(even){
    background: #f7f7f7;
}

.pulse-red {
    background: red !important;
    animation: pulse-red-animation 1.2s infinite;
}

@keyframes pulse-red-animation {
  0% {
    box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);
  }
  100% {
    box-shadow: 0 0 0 20px rgba(255, 0, 0, 0.2);
  }
}
#sidebar-menu>li{
    background: #f7f7f7;
}
/*.card-header:first-child{*/
/*    background: rgb(246, 242, 242);*/
/*}*/
.secondary_color{
    color: #e15052 !important;
}

.secondary_bg{
    background-color: #e15052 !important;
}

/*.content-container{*/
/*width: 100%;*/
/*padding: 1vh;*/
/*}*/
/*.col{*/
/*padding: 2vh;*/
/*}*/
/*.f2{*/
/*font-size: 200%;*/
/*}*/
/*.f3{*/
/*font-size: 300%;*/
/*}*/
/*.min_h100{*/
/*     min-height: 100%;*/
/*}*/
/*.o-grid{*/
/*    display: grid;*/
/*    grid-template-columns: 1fr;*/
/*    gap: 10px;*/
/*}*/
/*.o-flex{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: stretch*/
/*}*/
/*!*# sensor data grid*!*/
/*.sd-grid{*/
/*    display: grid;*/
/*    grid-template-columns: 1fr;*/
/*    gap: 10px;*/
/*}*/
/*.sd-flex{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: stretch*/
/*}*/
/* !*other settings grid*!*/
/*.ots-grid{*/
/*    display: grid;*/
/*    grid-template-columns: 1fr;*/
/*    gap: 10px;*/
/*}*/
/*.ots-flex{*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    justify-content: stretch;*/
/*}*/

/*#temperature-container{*/
/*!*z-index: 1000;*!*/
/*}*/
/*header, main, footer {*/
/*!*padding-left: 300px;*!*/
/*}*/
/*.line-height-3{*/
/*    line-height: 3rem;*/
/*}*/
/*.line-height-4{*/
/*    line-height: 4rem;*/
/*}*/
/*.end-float{*/
/*    clear: both;*/
/*}*/
/*.w100{*/
/*    width: 100%;*/
/*}*/
/*.w20{*/
/*    width:20%;*/
/*}*/
/*.w30{*/
/*    width: 30%;*/
/*}*/
/*.w40{*/
/*    width: 40%;*/
/*}*/
/*.pos-relative{*/
/*    position: relative;*/
/*}*/

/*.number_input{*/
/*    width: 40% !important;*/
/*}*/
/*.range-slider{*/
/*    display: inline-flex;*/
/*}*/
/*.range-slider-slider{*/
/*    width: 70%;*/
/*}*/
/*.range-slider-number{*/
/*    width: 20%;*/
/*    float: right;*/
/*}*/

/*!*#alarm-setting .alarm-setting-tab{*!*/
/*!*    line-height: 3rem;*!*/
/*!*}*!*/
/*.alarm-setting-tab{*/
/*    padding:0 !important;*/
/*}*/

/*#alarm-settings-grid{*/
/*    display: grid;*/
/*    grid-auto-flow:column;*/
/*    gap: 10px;*/
/*}*/
/*#alarm-settings-grid>div{*/
/*    padding:0;*/
/*    margin: 0;*/
/*}*/
/*.setting-form{*/
/*    margin-top: 3vh;*/
/*}*/

/*#display_brightness-card{*/
/*    grid-row: 1 / span 2;*/
/*    grid-column: 1 / span 2;*/

/*}*/
/*#display_brightness-form{*/
/*    display: grid;*/
/*    grid-template-columns: repeat(6, 1fr);*/
/*    grid-template-rows: repeat(2, 1fr);*/
/*    vertical-align: middle;*/
/*    align-items: center;*/
/*}*/

/*#brightness-slider{*/
/*    grid-column: 2 / span 5;*/
/*    width: 100%;*/
/*    margin: 30px 0;*/
/*    display: grid;*/
/*}*/

/*#brightness_num-container{*/
/*    grid-row: 1;*/
/*    grid-column: 1;*/
/*}*/

/*#display_brightness-submit{*/
/*    grid-column: 1 / span 3*/
/*}*/

/*!*materialize tabs*!*/
/*.carousel .carousel-item{*/
/*    width:100%;*/
/*}*/

/*.secondary-content{*/
/*    max-width: 60%;*/
/*}*/


/*input[type=number]::-webkit-inner-spin-button,*/
/*input[type=number]::-webkit-outer-spin-button {*/
/*      opacity: 1;*/
/*      margin: 0;*/
/*}*/

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

/*.tabs-content.carousel .carousel-item { height:auto; }*/

/*.prx-card-action-button{*/
/*    !*position: absolute !important;*!*/
/*    !*bottom: 10px !important;*!*/
/*    !*left: 0 !important;*!*/
/*}*/

/*!*.prx-form{*!*/
/*!*    position: relative;*!*/
/*!*    height: 100%;*!*/
/*!*}*!*/


/*.grid-12-2-fr{*/
/*    display: grid;*/
/*    grid-auto-flow: column;*/
/*    grid-template-columns: repeat(12, 1fr);*/
/*    grid-template-rows: repeat(2, 1fr);*/
/*    gap: 10px;*/
/*}*/



/*@media only screen and (max-width : 992px) {*/
/*    header, main, footer {*/
/*        padding-left: 0;*/
/*    }*/

/*    #alarm-settings-grid{*/
/*        grid-template-rows: repeat(4, 1fr);*/
/*    }*/

/*    #alarm-settings-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1 / span 12;*/
/*    }*/
/*    #alarm-settings-grid-item-2{*/
/*        grid-row: 2;*/
/*        grid-column: 1 / span 12;*/
/*    }*/
/*    #alarm-settings-grid-item-3{*/
/*        grid-row: 3;*/
/*        grid-column: 1 / span 12;*/
/*    }*/
/*    #alarm-settings-grid-item-4{*/
/*        grid-row: 4;*/
/*        grid-column: 1 / span 12;*/
/*    }*/

/*}*/
/*!*@media only screen and (max-width : 599px) {*!*/
/*!*    header, main, footer {*!*/
/*!*        padding-left: 0;*!*/
/*!*    }*!*/






/*!*}*!*/



/*@media screen and (min-width: 600px) {*/


/*    .o-grid{*/
/*        grid-template-rows: repeat(4, 1fr);*/
/*        grid-template-columns: repeat(4, 1fr);*/
/*    }*/

/*    .o-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1;*/
/*    }*/
/*    .o-grid-item-2{*/
/*        grid-row: 1;*/
/*        grid-column: 2;*/
/*    }*/
/*    .o-grid-item-3{*/
/*        grid-row: 1 / span 2;*/
/*        grid-column: 3 / span 2 ;*/
/*    }*/
/*    .o-grid-item-4{*/
/*        grid-row: 3 / span 2 ;*/
/*        grid-column:  1 / span 2;*/
/*    }*/
/*    .o-grid-item-5{*/
/*        grid-row: 2;*/
/*        grid-column: 1 / 3;*/
/*    }*/
/*    .o-grid-item-6{*/
/*        grid-row: 3 / span 2;*/
/*        grid-column: 3 / span 2;*/
/*    }*/
/*    .sd-grid-item-1{*/
/*        grid-row: 1 / span 3;*/
/*        grid-column: 1 / span 6;*/
/*    }*/
/*    .sd-grid-item-2{*/
/*        grid-row: 1 / span 3;*/
/*        grid-column: 7 / span 6;*/
/*    }*/
/*    .sd-grid-item-3{*/
/*        grid-row: 4 / span 3;*/
/*        grid-column: 1 / span 6;*/
/*    }*/
/*    .sd-grid-item-4{*/
/*        grid-row: 4 / span 3 ;*/
/*        grid-column:  7 / span 6;*/
/*    }*/

/*    .ots-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1 / span 6;*/
/*    }*/


/*}*/

/*@media screen and (min-width: 992px) {*/
/*    .o-grid{*/
/*        grid-template-rows: repeat(4, 1fr);*/
/*        grid-template-columns: repeat(8, 1fr);*/
/*    }*/

/*    .o-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1;*/
/*    }*/
/*    .o-grid-item-2{*/
/*        grid-row: 1;*/
/*        grid-column: 2;*/
/*    }*/
/*    .o-grid-item-3{*/
/*        grid-row: 1 / span 2;*/
/*        grid-column: 3 / span 2 ;*/
/*    }*/
/*    .o-grid-item-4{*/
/*        grid-row: 1 / span 2 ;*/
/*        grid-column:  5 / span 2;*/
/*    }*/
/*    .o-grid-item-5{*/
/*        grid-row: 1 / span 2;*/
/*        grid-column: 7 / span 2;*/
/*    }*/
/*    .o-grid-item-6{*/
/*        grid-row: 2;*/
/*        grid-column: 1 / span 2;*/
/*    }*/
/*    .o-grid-item-7{*/
/*        grid-row: 3 / span 2;*/
/*        grid-column: 1 / span 8;*/
/*    }*/


/*    #alarm-settings-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1 / span 6;*/
/*    }*/
/*    #alarm-settings-grid-item-2{*/
/*        grid-row: 1;*/
/*        grid-column: 7 / span 6;*/
/*    }*/
/*    #alarm-settings-grid-item-3{*/
/*        grid-row: 2;*/
/*        grid-column: 1 / span 6;*/
/*    }*/
/*    #alarm-settings-grid-item-4{*/
/*        grid-row: 2;*/
/*        grid-column: 7 / span 6;*/
/*    }*/


/*}*/


/*@media screen and (min-width: 1500px) {*/
/*    .o-grid{*/
/*        grid-template-rows: repeat(4, 1fr);*/
/*        grid-template-columns: repeat(8, 1fr);*/
/*    }*/

/*    .o-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1;*/
/*    }*/
/*    .o-grid-item-2{*/
/*        grid-row: 1;*/
/*        grid-column: 2;*/
/*    }*/
/*    .o-grid-item-3{*/
/*        grid-row: 1 / span 2;*/
/*        grid-column: 3 / span 2 ;*/
/*    }*/
/*    .o-grid-item-4{*/
/*        grid-row: 1 / span 2 ;*/
/*        grid-column:  5 / span 2;*/
/*    }*/
/*    .o-grid-item-5{*/
/*        grid-row: 1 / span 2;*/
/*        grid-column: 7 / span 2;*/
/*    }*/
/*    .o-grid-item-6{*/
/*        grid-row: 2;*/
/*        grid-column: 1 / span 2;*/
/*    }*/
/*    .o-grid-item-7{*/
/*        grid-row: 3 / span 2;*/
/*        grid-column: 1 / span 8;*/
/*    }*/



/*    #alarm-settings-grid-item-1{*/
/*        grid-row: 1;*/
/*        grid-column: 1 / span 3;*/
/*    }*/
/*    #alarm-settings-grid-item-2{*/
/*        grid-row: 1;*/
/*        grid-column: 4 / span 3;*/
/*    }*/
/*    #alarm-settings-grid-item-3{*/
/*        grid-row: 1;*/
/*        grid-column: 7 / span 3;*/
/*    }*/
/*    #alarm-settings-grid-item-4{*/
/*        grid-row: 1;*/
/*        grid-column: 10 / span 3;*/
/*    }*/
/*}*/















/*!*tabs*!*/
/*@import url('https://fonts.googleapis.com/css2?family=Jost:wght@100;300;400;700&display=swap');*/

/*!*body {*!*/
/*!*  text-align: center;*!*/
/*!*  font-family: 'Jost', sans-serif;*!*/
/*!*  background-color: #f0f5ff;*!*/
/*!*}*!*/

/*!*h1 {*!*/
/*!*  font-size: 48px;*!*/
/*!*  color: #232c3d;*!*/
/*!*}*!*/

/*.tab-wrapper {*/
/*  width: 100%;*/
/*  margin: auto;*/
/*  background-color: white;*/
/*  border-radius: 10px;*/
/*  box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);*/
/*}*/

/*.tab-buttonWrapper {*/
/*  display: grid;*/
/*  grid-template-columns: 1fr 1fr 1fr;*/
/*}*/

/*.tab-button {*/
/*  letter-spacing: 3px;*/
/*  border: none;*/
/*  padding: 10px;*/
/*  background-color: #bccbe9;*/
/*  color: #232c3d;*/
/*  font-size: 18px;*/
/*  cursor: pointer;*/
/*  transition: 0.5s;*/
/*}*/

/*.tab-button:hover {*/
/*  background-color: #d5e3ff;*/
/*}*/

/*.tab-button.active {*/
/*  background-color: white;*/
/*}*/

/*.tab-active {*/
/*  background-color: white;*/
/*}*/

/*.tab-p {*/
/*  text-align: left;*/
/*  padding: 10px;*/
/*}*/

/*.tab-content {*/
/*  display: none;*/
/*  padding: 10px 20px;*/
/*}*/

/*.tab-content.active {*/
/*  display: block;*/
/*}*/


/*#network_settings_form td,#network_settings_form th{*/
/*    padding: 0 !important;*/
/*}*/
/*#wlan_network_settings_form td, #wlan_network_settings_form th{*/
/*    padding: 0 !important;*/
/*}*/


/*#network_settings_form [type="checkbox"]:not(:checked), #network_settings_form [type="checkbox"]:checked, #network_settings_form [type="radio"]:not(:checked), #network_settings_form [type="radio"]:checked{*/
/*    position: relative !important;*/
/*     opacity: 100% !important;*/
/*     pointer-events: inherit !important;*/
/*}*/
/*#wlan_network_settings_form [type="checkbox"]:not(:checked), #wlan_network_settings_form [type="checkbox"]:checked, #wlan_network_settings_form [type="radio"]:not(:checked), #wlan_network_settings_form [type="radio"]:checked{*/
/*    position: relative !important;*/
/*     opacity: 100% !important;*/
/*     pointer-events: inherit !important;*/
/*}*/









/*index_body_menu.html*/
.index_body_menu{
    top:0;
    z-index:4;
    scrollbar-width: thin;
    height:100%;
    color: #000;
    position:fixed;
    line-height: 1.5;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.2);
    font-weight: 500;
    overflow-y:auto;
    overflow-x: hidden;
    background-color:white;
    scrollbar-color: #1a64b7 transparent;
    flex-direction: column;
    display:flex;
}

.menu_logo{
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}

.menu_logo>a>img{
    height:40px;
    margin-top:5px;
    margin-bottom:5px;
}

.menu_logo>div>img{
    height:40px;
    margin-top:5px;
    margin-bottom:5px;
}

.menu_options{
    height:50px;
    float:right;
    display:none;

}

.menu_options>div{
    cursor:pointer;
    margin-top:5px;
    margin-right:5px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
}

.menu_options>div:hover{
    border: solid #d3d3d3 1px;
    background: #d3d3d3;
}

.menu_options>div>img{
    height:30px;
    margin:4px;
}
.hide_menu_always_button{
    display:flex;
    align-items:center;
}

.menu_info{
    margin-top:auto;
    margin-bottom:0;
}

.menu_info>img{
    height:20px;
    margin-top:5px;
}

.menu_info>p{
    text-align: center;
    margin:0;
    padding-top:10px;
    font-size:0.75rem;
}

.menu_info>div{
    text-align: center;
    margin:0;
    padding-top:5px;
    font-size:0.75rem;
}

.hide_menu_always_button{
    padding-bottom:0px;
}

.hide_menu_always_button>a{
    text-decoration:none;
    color:#000;
    width: 100%;
}

.hide_menu_always_button>a>div{
    height:40px;
    padding-left:10px;
    cursor:pointer;
    background:#ffffff;
    color:#000000;
    filter: invert(0%);
    display:flex;
    align-items:center;
}
.hide_menu_always_button>a>div:hover{
    animation-name: hide_menu_always_keyframe_left;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes hide_menu_always_keyframe_left {
  0%   {padding-left:30px;}
  100% {padding-left:10px;}
}
@keyframes hide_menu_always_keyframe_right {
  0%   {padding-left:10px;}
  100%   {padding-left:30px;}
}

.hide_menu_always_button>a>div>img{
    height:30px;
    margin-left:3px;
}

.hide_menu_always_button>a>div>p{
    margin:0;
    margin-left:5px;
}

.menu_list{
    padding-top:10px;
}

.log_button{
    margin-bottom: 20px;
}

/*.menu_list>div, .log_button>div{
    height:1px;
    background:#99b9da;
}*/

.menu_list_active, .log_button>a{
    text-decoration:none;
    color:#000 !important;
}

.menu_list_active>div, .log_button>a>div{
    height:50px;
    padding-left:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
}

.menu_list_selected{
    background:#664625;
    filter: invert(100%);
}

.menu_list_active>div:hover, .log_button>a>div:hover{
    background:#664625;
    filter: invert(100%);
    transition: background-color .5s ease-in-out
}

.menu_list_active>div>img, .log_button>a>div>img{
    height:30px;
    margin-left:3px;
}

.menu_list_active>div>p, .log_button>a>div>p{
    margin:0;
    margin-left:5px;
}
 /*/////////////////////////////////!*/
 .menu_list_main_menu{
    text-decoration:none;
    color:#000 !important;
}

.menu_list_main_menu>div{
    height:50px;
    padding-left:10px;
    cursor:pointer;
    display:flex;
    align-items:center;
}

.menu_list_main_menu>div:hover{
    background:#aaaaaa;
    filter: invert(100%);
    transition: background-color .5s ease-in-out
}

.menu_list_main_menu>div>img{
    height:30px;
    margin-left:3px;
}

































.menu_list_main_menu>div>p{
    margin:0;
    margin-left:5px;
}

.menu_opener{
    z-index:3;
    position:fixed;
    width:15px;
    height:100%;
    background:transparent;
}

/*index_body_center_footer.html*/
.footer{
    z-index:2;
    position:fixed;
    bottom:0; right:0; top:auto;
    height:36px;
    left:240px;
    text-align:center;
    padding-top:0px;
    padding-bottom:0px;
    color:white;
    font-weight:500;
    font-size: 0.8rem;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color:#1a64b7;
}

.footer>div>a{
    color:#00bef4;
}

.column_picker{
    background:#1a64b7;
    color:white;
}

.center_content{
    display:flex;
    height: fit-content;
    height: -moz-fit-content;
}

.center_box_div{
    margin:10px;
    background-color:#fff;
    box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
    /*white-space: nowrap;*/
    width: fit-content;
    width: -moz-fit-content;
    height: fit-content;
    height: -moz-fit-content;
}

/*index_body_debug.html*/
.index_body_debug{
    z-index:4;
    scrollbar-width: thin;
    height:100%;
    color: #000;
    position:fixed;
    line-height: 1.5;
    box-shadow: -5px 5px 10px 0px rgba(0,0,0,0.2);
    font-weight: 500;
    overflow-y:auto;
    background-color:white;
    scrollbar-color: #1a64b7 transparent;
    right: -240px;
    width: 240px;
}

/*Táblázat*/
.center_box_div_export {
    background: white;
    padding: 8px 8px 8px 0px;
    text-align:center;
    display:flex;
    float: right;
    align-items: flex-end;
}

.center_box_div_date_filter {
    background: white;
    padding: 8px;
    float: left;
    display: flex;
    flex-direction: column;
}


.center_box_div_header {
    padding: 8px;
    height: 100%;
    width:100%;
    display:flex;
    font-size: 1.25rem;
    background:aliceblue;
    text-align:left;
    position:relative;
}

.center_box_div_content{
    margin:3px;
    border:1px solid #dbdbdb;
    border-radius:4px;
    height: calc(100% - 48px);
}

.header_button{
    box-shadow: 0px 0px 3px 0px;
    background: #f0f0f0;
    border-radius: .25rem;
    border: solid 1px #909090;
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    padding: 1px;
    z-index:2;
    height:28px;
    transition: color .25s ease-in-out,background-color .25s ease-in-out,border-color .25s ease-in-out,box-shadow .25s ease-in-out !important;
}

.header_button:hover{
    opacity:0.5;
    transition: color .25s ease-in-out,background-color .25s ease-in-out,border-color .25s ease-in-out,box-shadow .25s ease-in-out !important;
}

.export_options_form{
    margin-right: 0px;
    margin-left: auto;
    z-index:2;
}

.export_options_form>select{
    cursor:pointer;
}

.btn_ {
    padding-top:0;
    padding-bottom:0;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 1px;
    display: block;
    width: 100%;
    cursor:pointer;
    border-radius: .25rem;
    display: inline-block;
    font-size: 15px;
    padding: 2px;
    border: 1px solid #cccccc;
    background-color:white;
}
.btn_grey {
    color: black;
    background:#cccccc;
    border: 1px solid #cccccc;
}

.btn_grey_hover:hover {
    /*background-image: linear-gradient(0deg,#666666a8 50%, #66666614, #666666a8), linear-gradient(90deg, #666666a8 ,#66666614, #666666a8 70%), radial-gradient(circle at 20% -30%, #66666614 60%, #666666a8 60%) !important;*/
    color:white !important;
    background-color:#666666 !important;
    transition: background-color .5s ease-in-out, color .5s ease-in-out
}

.btn_green {
    color:white;
    background-color: #28a745;
    border-color: #28a745;
}
.btn_green_hover:hover{
    /*background-image: linear-gradient(0deg,#28a745a8 50%, #28a74514, #28a745a8), linear-gradient(90deg, #28a745a8 ,#28a74514, #28a745a8 70%), radial-gradient(circle at 20% -30%, #28a74514 60%, #28a745 60%) !important;*/
    color:white !important;
    background-color:#228c3a !important;
    transition: background-color .5s ease-in-out, color .5s ease-in-out
}

.btn_orange {
    color:white;
    background:#ffb868 !important;
    border: 1px solid #ffb868 !important;
}

.btn_orange_hover:hover {
    color:white !important;
    background-color:#ffb868 !important;
    transition: background-color .5s ease-in-out, color .5s ease-in-out
}

.btn_red {
    color:white;
    background:#dc3545;
    border: 1px solid #dc3545;
}

.btn_red_hover:hover{
    /*background-image: linear-gradient(0deg,#dc3545a8 50%, #dc354514, #dc3545a8), linear-gradient(90deg, #dc3545a8 ,#dc354514, #dc3545a8 70%), radial-gradient(circle at 20% -30%, #dc354514 60%, #dc3545 60%) !important;*/
    color:white !important;
    background-color:#96232e !important;
    transition: background-color .5s ease-in-out, color .5s ease-in-out
}

.btn_blue {
    color:white;
    background:#1a64b7 !important;
    border: 1px solid #1a64b7 !important;
}



































.btn_blue_hover:hover{
    /*background-image: linear-gradient(0deg,#1a64b7a8 50%, #1a64b714, #1a64b7a8), linear-gradient(90deg, #1a64b7a8 ,#1a64b714, #1a64b7a8 70%), radial-gradient(circle at 20% -30%, #1a64b714 60%, #1a64b7 60%) !important;*/
    color:white !important;
    background-color:#134a87 !important;
    transition: background-color .5s ease-in-out, color .5s ease-in-out
}

.webgrid-head>tr>td>input::placeholder {
  color: #a0a0a0;
  opacity: 1; /* Firefox */
}
.webgrid-head>tr>td>input[type=text]{
    color:#1a64b7;
}
/*.webgrid-head>tr>td>input:required:valid{
    background-color: rgb(250, 255, 189);
}*/
.wg-table {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border:solid #dee2e6 1px;
    background: #ffffff;
}

.webgrid-head>tr>th{
    text-align:center;
    padding:5px;
    cursor:pointer;
}

.webgrid-body>tr{
    border:solid 1px #dee2e6;
}

.webgrid-body>tr>td{
    padding:2px;
    text-align:center;
    font-size: .9rem;
    cursor:pointer;
}

.selected {
    background-color: #dee2e6 !important;
    color: #000 !important;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: 0px;
  line-height: 1.25;
  color: #1a64b7 !important;
  background-color: #fff;
  text-decoration: none;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  z-index: 2;
  /*background-image: linear-gradient(0deg,#1a64b7a8 50%, #1a64b714, #1a64b7a8), linear-gradient(90deg, #1a64b7a8 ,#1a64b714, #1a64b7a8 70%), radial-gradient(circle at 20% -30%, #1a64b714 60%, #1a64b7 60%) !important;*/
  text-decoration: none;
  color:white !important;
  background-color:#134a87 !important;
  transition: background-color .5s ease-in-out, color .5s ease-in-out
}

.page-input {
  width:60px;
  position: relative;
  display: block;
  margin-left: 0px;
  line-height: 1.25;
  color: #1a64b7 !important;
  background-color: #fff;
  text-decoration: none;
  border: 1px solid #dee2e6;
}

.page-item.active
.page-link{
    z-index: 1;
    color: #fff !important;
    background-color: #1a64b7;
    border-color: #007bff;
    cursor: pointer;
    text-decoration: none;
}

.page-item:first-child .page-link {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

.overlay{
    position:absolute;
    top: 0;
    z-index:8;
    height:100%;
    width:100%;
    display:none;
    background:transparent;
}

/*Loader*/
.lds-roller {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
  margin-top:calc(50vh - 32px);
  margin-left:calc(50vw - 32px);
}
.lds-roller div {
  animation: lds-roller 1.2s cubic-bezier(0.59, 0.07, 0.55, 0.74) infinite;
  transform-origin: 32px 32px;
}
.lds-roller div:after {
  content: " ";
  display: block;
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #005faa;
  margin: -3px 0 0 -3px;
}
.lds-roller div:nth-child(1) {
  animation-delay: -0.036s;
}
.lds-roller div:nth-child(1):after {
  top: 50px;
  left: 50px;
  opacity:0.1;
}
.lds-roller div:nth-child(2) {
  animation-delay: -0.072s;
}
.lds-roller div:nth-child(2):after {
  top: 54px;
  left: 45px;
  opacity:0.2;
}
.lds-roller div:nth-child(3) {
  animation-delay: -0.108s;
}
.lds-roller div:nth-child(3):after {
  top: 57px;
  left: 39px;
  opacity:0.3;
}
.lds-roller div:nth-child(4) {
  animation-delay: -0.144s;
}
.lds-roller div:nth-child(4):after {
  top: 58px;
  left: 32px;
  opacity:0.4;
}
.lds-roller div:nth-child(5) {
  animation-delay: -0.18s;
}
.lds-roller div:nth-child(5):after {
  top: 57px;
  left: 25px;
  opacity:0.5;
}
.lds-roller div:nth-child(6) {
  animation-delay: -0.216s;
}
.lds-roller div:nth-child(6):after {
  top: 54px;
  left: 19px;
  opacity:0.6;
}
.lds-roller div:nth-child(7) {
  animation-delay: -0.252s;
}
.lds-roller div:nth-child(7):after {
  top: 50px;
  left: 14px;
  opacity:0.7;
}
.lds-roller div:nth-child(8) {
  animation-delay: -0.288s;
}
.lds-roller div:nth-child(8):after {
  top: 45px;
  left: 10px;
  opacity:0.8;
}
.lds-roller div:nth-child(9) {
  animation-delay: -0.324s;
}
.lds-roller div:nth-child(9):after {
  top: 39px;
  left: 8px;
  opacity:0.9;
}
@keyframes lds-roller {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*Keyboard css*/

.keyboard_vertical_flex{
    display:flex;
    width:98.5%;
    height:96%;
    flex-direction: column;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
}

/*.row{*/
/*    display:flex;*/
/*    width:100%;*/
/*    height:20%;*/
/*    margin-left: auto;*/
/*    margin-right: auto;*/
/*    align-items:center;*/
/*}*/

.first_row_start{
    border-top-left-radius: 10px;
    margin-left:0;
}

.first_row_end{
    border-top-right-radius: 10px;
}

.last_row_start{
    border-bottom-left-radius:10px;
    margin-left:0;
}

.last_row_end{
    border-bottom-right-radius:10px;
}

.keyboard_vertical_flex>div>button{
    border:transparent 1px solid;
    flex-grow: 1;
    margin-left:0.4%;
    border-radius:4px;
    padding:0;
    background: #444444;
    color:white;
    height:95%;
}

.webgrid_img_icon{
    margin-right: 10px;
    align-self: center;
    float: left;
}

.toast-confirm, .toast-success{
    background: #198754 !important;
    color: white !important;
}
.toast-confirm .toast-body-text:before, .toast-success .toast-body-text:before{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f00c";
    margin-right: 5px;
}

.toast-error{
    background: #dc3545 !important;
    color: white !important;
}
.toast-error .toast-body-text:before{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f12a";
    margin-right: 5px;
}

.toast-info{
    background: #0d6efd !important;
    color: white !important;
}

.toast-info .toast-body-text:before{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f129";
    margin-right: 5px;
}

.toast-debug{
    background: #6610f2 !important;
    color: white !important;
}

.toast-debug .toast-body-text:before{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(0, 0);
    content: "\f188";
    margin-right: 5px;
}

.infinite_rotate{
    display: inline-block;
  animation: rotate 2s infinite linear;
}

.hover-rotate-25:hover{
    /*transform: rotate(-0.25turn);*/
    animation: rotate45 0.3s 0s linear;
}

@keyframes rotate45 {
  0% {
    transform: rotate( 0deg );
  }
  100% {
    transform: rotate( -45deg);
  }
}

@keyframes rotate {
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.selected-menu{
    background: #0a53be;
}

.selected-menu p{
    color: white
}