/* 
CSS VALIDATOR 
https://jigsaw.w3.org/css-validator/#validate_by_input+with_options 
*/

/*
.device_group_button_img {
 position:relative;
 top:0px;
 left:0px;
}
*/


.more_space {
 margin-top:20px;
}

.pagination {
 border: 1px solid #dee2e6;
}

.pagination:hover {
 background-color: #dde1e3;
 text-decoration: none;
}


.device_group_button {
 width: 270px; 
 display: inline-block; 
 margin-top: 20px !important;
 margin-bottom: 20px !important;
 xmargin-left: 22px !important;
 xmargin-right: 0px !important;
 font-size: 1.3em !important;
 line-height: 32px;
}

.device_group_button:hover {
 background-color: #0168b2!important;
}



.device_group_button_right {
 xmargin-right: 24px;
}

.device_group_button_left {
 xmargin-left: 24px;
}

.reports_select {
 margin-bottom:20px;
 font-size: 1.5em;
 width: 300px;
 color: gray;
}

.gago_menu {
 z-index:90;
 display:none;
 width:150px;
 position:fixed;
 border:1px solid gray;
 padding:10px;
 background:white;
 text-align:center;
}
.shares_menu {
 z-index:90;
 width:150px;
 position:fixed;
 border:1px solid gray;
 padding:10px;
 background:white;
 text-align:center;
}


.push_textarea {
 margin-right:10px;
 width: 470px;
 max-width: 80vw;
 height: 100px;
}

.send_push_to_user_wrapper {
 z-index:90;
 display:none;
 position: fixed;
 top:10px;
 left:10px;
 box-shadow: 0px 1px 5px lightgrey; 
 padding:2px; 
 width:500px; 
 max-width: 90vw;
 height:600px; 
 border:1px solid gray;
 background: white;
}

.send_push_to_user_inner {
 height:450px; 
 overflow-x:hidden; 
 overflow-y:auto; 
 border:1px solid gray;
}

.send_push_list {
 cursor:hand; 
 padding:2px; 
 border-bottom:1px solid gray;
 background: white;
}

.send_push_list:hover {
 background: #f2f2f2;
}



.state_override_frame {
 position:relative;
 display:inline-block; 
 height:47px;
 width:21px;
 border: 0px solid gray;
}

.state_override_stage {
 height:14px;
 width:17px;
 border: 0px solid yellow;
}



.bk_red {
 background: red;
}

.bk_green {
 background: green;
}

.bk_yellow {
 background: yellow;
}


.red {
 color: red;
}

.green {
 color: green;
}


 .wizard_step {
 padding:10px; 
 border:1px solid gray;"
 }

 .share_wizard_res_frame {
 z-index:95;
 display:none; 
 cursor:hand; 
 padding:10px; 
 position:absolute; 
 min-height:100px; 
 max-height:300px; 
 overflow-y: scroll;
 width:200px; 
 border:1px solid gray; 
 background:white;
 }

 .share_wizard_result {
 border-bottom: 1px solid gray;
 background-color:white; 
 padding:3px;
 }
 .share_wizard_result:hover{
 color:white;
 background-color:#0D92D0; 
 }

.share_menu_item {
 width:130px;
 padding:5px;
 margin:5px;
 color:white; 
 cursor: pointer;
 background-color: #34bfa3;
 border:1px solid gray;
}

.share_menu_item:hover {
 color:#34bfa3;
 background-color: white; 
 box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 20%);
}


.share_menu_item_rev {
 width:130px;
 padding:5px;
 margin:5px;
 color:white;
 cursor: pointer;
 background-color: #ff6f00; 
 border:1px solid gray;
}

.share_menu_item_rev:hover {
 color:white; 
 background-color: #34bfa3;
 box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 20%);
}

.brightness {
}

.brightness img:hover {
 box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 20%);
 cursor:pointer;
}


.device_group_container {
 padding:5px; 
 display:none; 
 position:fixed; 
 top:10px; 
 left:10px; 
 width:250px; 
 background:white; 
 z-index:95;
 cursor: move;
}


.device_group {
 cursor: pointer;
 margin:5px; 
 padding:5px;
 font-size:0.9em; 
 text-align:center; 
 height:30px;
 margin-top:7px;
 margin-bottom:7px;
 vertical-align:middle;
 line-height: 30px; 
}

.shadow {
 box-shadow: 0px 4px 8px 0px rgb(0 0 0 / 20%);
}


.ship_addr_field {
 width:300px;
 height:24px;
 font-size:1.1em;
}

.product_description {
 border:1px solid gray;
 background:lightgray;
 top:100px;
 left:100px;
 width:200px;
 height:100px;
 display:none;
 position:fixed;
}

.bordered {
 border:1px solid gray;
}

.gray_bg {
 background:lightgray;
}

.more_information_en {
 position:absolute;
 border:10px solid #0168b2; 
 margin:10px;
 padding:20px;
 xtop:100px;
 xleft:50px;
 width:450px;
 height:300px;
 display:none;
 background:white;
 border-radius:30px;
 z-index:70;
}

.more_information_he {
 position:absolute;
 border:10px solid #0168b2; 
 margin:10px;
 padding:20px;
 xtop:100px;
 xleft:50px;
 width:450px;
 height:300px;
 display:none;
 background:white;
 border-radius:30px;
 z-index:70;
}


.signal_strength_gauge_class_1 {
 background-color:white;
 border:0px solid gray;
 width:25px;
 height:25px;
 padding-top:5px;
}

.wave {
 display: inline-block;
 border: 2px solid transparent;
 border-top-color: currentColor;
 border-radius: 50%;
 border-style: solid;
 margin: 2px;
}
 
 
.waveStrength-3 .wv4.wave,
.waveStrength-2 .wv4.wave,
.waveStrength-2 .wv3.wave,
.waveStrength-1 .wv4.wave,
.waveStrength-1 .wv3.wave,
.waveStrength-1 .wv2.wave {
 border-top-color: #eee;
} 



.sql_editor_buttons {
 position:fixed;
 left:40px;
 z-index:100;
}


.context_menu_item {
 color:black;
}

.context_menu_banner {
 font-size:1.3em;
 color:gray;
}

.context_menu_item:hover{
 color:blue;
 text-decoration: none;
}

.tablea {border-collapse: collapse; font-size:0.9em;}
.tha {border: 1px solid white; padding:7px; border-collapse: collapse; background:lightgray;}
.tda {border: 1px solid lightgray; padding:7px; border-collapse: collapse;}


.ltr {
 direction: ltr;
}

.rtl {
 direction: rtl;
}

/*--------------------------------- */
/* GAGO MONITOR */
/*--------------------------------- */

.mTable {
 width: 100%;
 height:450px;
 border-spacing: 0px;
 border:0px solid black;
}
.mCell {
 background:black; 
 margin:5px;
 border:1px solid white; 
 color:white;
 font-size:1.5em;
}

.tCell {
 padding:0px; 
 margin:0px;
 border:0px solid yellow; 
 color:white;
 font-size:0.75em;
 height:25px;
}

.mLed {
 height: 30px;
 width: 30px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}


.mButton {
 padding:0px;
 height: 40px;
 width: 64px;
 border-radius: 10%;
 text-align:center;
 color:white;
 font-size:1.2em;
 font-weight: bold;
 cursor:pointer;
}

.mBlue {
 background-color: #0168B2;
}

.mRed {
 background-color: red;
}

.mOrange {
 background-color: orange;
}

.mGreen {
 background-color: green;
}

.mNavy {
 background-color: navy;
}

.mYellow {
 background-color: yellow;
}

.mBlack {
 background-color: black;
}


.noBorder {
 border:0px;
 border-spacing: 0px;
}

.ledsCell {
 background:black; 
 padding:5px; 
 margin:5px;
 border:0px; 
 color:white;
 font-size:1.5em;
}

.graphCell {
 width:<?echo $num_of_ticks?>px;
 min-width:<?echo $num_of_ticks?>px;
 max-width:<?echo $num_of_ticks?>px;
 height:100px;
 border:0px solid yellow;
}


.graphCaption {
 vertical-align:top;
 font-weight: bold;
 font-size:1em;
}

.tTick {
 border-left:1px solid gray;
 border-top:1px solid gray;
 width:4%;
}

.lineYellow {
 stroke:yellow;
 stroke-width:3;
}

.lineOrange {
 stroke:orange;
 stroke-width:1;
}

.lineGray {
 stroke:gray;
 stroke-width:1;
}
.stripeGray {
 stroke:gray;
 stroke-width:1;
 fill:gray;
}


.stripeLightGray {
 stroke:gray;
 stroke-width:1;
 fill:black;
}

.stripeGreen {
 stroke:green;
 stroke-width:1;
 fill:green;
}


.stripeOrange {
 stroke:orange;
 stroke-width:1;
 fill:orange;
}

.stripeRed {
 stroke:red;
 stroke-width:1;
 fill:red;
}

.emptyTask {
 fill:gray;
}

.lineRed {
 stroke:red;
 stroke-width:1;
}

.lineGreen {
 stroke:green;
 stroke-width:2;
}

.lineWhite {
 stroke:white;
 stroke-width:2;
}

.dotYellow {
 stroke:yellow;
 fill:yellow;
 stroke-width:1;
}

.dotRed {
 stroke:red;
 fill:red;
 stroke-width:1;
}

/*--------------------------------- */
/* */
/*--------------------------------- */


.ok_sign {
 z-index:99; 
 display:none;
 position:fixed; 
 top:50%; 
 left:50%; 
 transform: translate(-50%, -50%);
 background-color:#0168b2; 
 padding:2px 5px 2px 5px ; 
 color:white; 
 border:2px solid white; 
 border-radius:8px;
 font-size:2em;
 width:80px;
 height:50px;
 font-weight: bold;
}




/*--------------------------------- */
/* REMOTE TOOLBAR */
/*--------------------------------- */


.remote-popup {
 position:fixed;
 z-index:40;
 display:none;
 width:300px;
 height:400px;
 border: 3px solid #1C6EA4;
 border-radius: 10px;
 padding:14px;
 margin:0px auto;
 background-color:#f7f7f7;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}


.remote-button-popup {
 border:0px solid red;
 position:fixed;
 z-index:30;
 display:none;
 width:300px;
 border: 3px solid #1C6EA4;
 border-radius: 10px;
 padding:14px;
 margin:0 auto;
 background-color:#f7f7f7;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
}


.remote-toolbar-span {
 position:relative;
 color:white;
 font-weight: bold;
 font-size:2em;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);

}


.remote-toolbar-button {
 cursor: pointer;
 border:1px solid lightgray;
 background-color:black;//#f7f7f7;
 display:inline-block; 
 margin:5px;
 height:50px;
 width:50px;
 vertical-align:middle;
}


.remote-toolbar-image {
 position:relative;
 display:block;
 height:40px;
 padding:5px;
}

.remotes-page-image {
 background-color:'#f7f7f7';
 position:absolute; 
 height:93px;
 width:60px;
 left:1px;
 top:1px; 
}



/*--------------------------------- */
/* GATES TOOLBAR */
/*--------------------------------- */
.gates-toolbar-image-div {
 position:relative;
 display:inline-block; 
 margin:5px;
 height:50px;
 width:50px;
 left:0px;
 top:5px; 
}

.gates-toolbar-image {
 position:absolute;
 display:block;
 height:40px;
 padding:5px;
}

.gates-toolbar-state {
 position:absolute;
 display:block;
 visibility:hidden;
 width: 0px;
 height: 0px;
 top: 2px;
 left: 32px;
 border-top: 16px solid white;
 border-left: 16px solid transparent;
}

.mqtt_state_positioning_div {
 position:absolute;
 width: 0px;
 height: 0px;
 border: 0px solid red;
 z-index:999;
}




/*--------------------------------- */
/* SHARES PAGE */
/*--------------------------------- */
.avatar_container {
 display:inline-table;
 min-width:200px;
 max-width:200px;
}

.flip-card {
 background-color: transparent;
 width: 100%;
 height: 100%;
 perspective: 1000px;
}

.flip-card-inner {
 text-align: center;
 transition: transform 0.6s;
 transform-style: preserve-3d;
 box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
 transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
 width: 100%;
 height: 100%;
 -webkit-backface-visibility: hidden;
 backface-visibility: hidden;
 padding:5px;
}

.flip-card-front {
 xbackground-color: #bbb;
 xcolor: black;
}

.flip-card-back {
 position: absolute;
 top:0px;
 left:0px;
 width: 100%;
 height: 100%;
 background-color: #2980b9;
 color: white;
 transform: rotateY(180deg);
}

/*--------------------------------- */
/* GATES PAGE */
/*--------------------------------- */
.gates-page-wrapper {
 position:relative;
 width:270px; 
 height:75px; 
 display:inline-block;
 float:center;
 border:1px solid lightgray;
 padding:10px;'
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 transition: 0.3s;
}

.gates-page-wrapper:hover {
 #box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}


.card_effect {
 /* Add shadows to create the "card" effect */
 box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
 margin-left:15px;
 transition: 0.3s;
}

/* On mouse-over, add a deeper shadow */
.card_effect:hover {
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.gates-page-image {
 pointer-events: none;
 position:absolute; 
 height:100%;
 width:70px;
 left:0px;
 top:0px; 
}

.gates-page-state {
 position:absolute;
 display:none;
 width: 0px;
 height: 0px;
 top: 2px;
 left: 42px;
 border-top: 26px solid white;
 border-left: 26px solid transparent;
}


.hover_highlight:hover {
 --background: #dde1e3;
}

.gates-page-gago-led {
 position:absolute;
 right:12px;
 bottom:10px; 
 height:12px;
 width:12px;
}

.signal_strength_gauge_class_2 {
 position:absolute;
 right:46px;
 bottom:14px; 
 height:10px;
 width:10px;
}

.gates-page-icon {
 position:absolute; 
 right:200px;
 bottom:10px; 
 height:12px;
 width:12px;
}

.gates-page-invisible {
 position:absolute;
 right:10px;
 top:8px; 
 height:15px;
 width:15px;
}




.gates-page-name {
 border:0px solid red;
 padding-left:50px;
}

.gates-page-name-span {
 font-size:1em;
 padding:15px;
 font-weight:bold;
}

.gates-page-desc {
 font-size:0.8em;
 padding:15px;
}

/*--------------------------------- */
/* AUTOMATIONS PAGE */
/*--------------------------------- */

.disabled {
 pointer-events:none; 
 opacity: 0.4;'
}

.automation_step_pending {
 border:1px solid red!important;
}

.automation_step_wrapper {
 position:relative;
 width:270px; 
 height:75px; 
 display:inline-block;
 float:center;
 border:1px solid lightgray;
 padding:10px;'
 text-align: center;
 margin-top:10px;
 margin-bottom:10px;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
 transition: 0.3s;
}


.automation_step_wrapper:hover {
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

.automation_page_image {
 position:absolute; 
 background-color:#0D92D0;
 height:100%;
 width:70px;
 left:0px;
 top:0px; 
}

.automation_page_image_small {
 xposition:absolute; 
 display:inline-block;
 vertical-align:middle;
 margin:2px;
 background-color:#0D92D0;
 height:100%;
 width:20px;
 left:0px;
 top:0px; 
}

.protocol_params_list_line {
 background-color:#f7f7f7;
 color:black;
}

.protocol_params_list_line:hover{
 color:white;
 background-color:#0D92D0;
}


.protocol_params_list {
 display: none;
 text-align:left;
 z-index:57;
 position:absolute;
 border: 1px solid #0D92D0;
 border-radius:10px;
 background-color:#f7f7f7;
 cursor:pointer;
 text-align:left;
 top:-40px;
 left:110px;
 width:250px;
 padding:7px;
}


.protocol_params_list_description:hover {
 
}

.protocol_params_list_description {
 xcolor:black;
 vertical-align:middle;
 display:inline-block;
 margin:2px;
}

.automation_text_outer {
 border:0px solid green;
 text-align:center;
 position:absolute;
 left:70px;
 top:0px;
 width:220px;
 height:100%;
}

.automation_text_inner {
 display:block;
 border:0px solid green;
 font-size:1em;
 padding:15px;
 text-align: center;
}

.automation_buttons_spacer {
 cursor:arrow;
 border:0px solid blue;
 position:absolute;
 top:-20px;
 left:290px;
 width:60px;
 height:120px;
}

.automation_buttons {
 display: none; 
 position:absolute;
 background-color:#f7f7f7;
 border: 1px solid #0D92D0;
 border-radius:10px;
 top:0px;
 left:318px;
 width:32px;
 padding:7px;
}

.automation_buttons_common {
 cursor:pointer;
 border:0px solid blue;
 position:relative;
 padding:3px;
}

.automation_move_up {
}

.automation_edit {
}

.automation_delete {
}


.automation_move_down {
}

.automation_add_above {
}

.automation_add_below {
}

.automation_edit_field {
 background:#f7f7f7;
 border:0px;
 margin-bottom:2px;
 padding:2px;
 font-size:1em;
 width:150px;
 text-align:center;
}



.small_automation_buttons_outer {
 position:absolute;
 top:44px;
 left:191px;
}

.small_automation_buttons {
 cursor:pointer;
 width:20px;
 height:20px;
 margin:2px;
}

.automation_edit_form {
 border:0px solid red;
 padding-top:15px;
 width:220px;
 height:100%;
 text-align: center;
 z-index:57;
 position:absolute;
 top:0px;
 left:0px;
 display:none;
}

.highlight_button {
}

.highlight_button img:hover {
 padding-left:7px;
}

/*--------------------------------- */
/* GOOGLE ORG CHART */
/*--------------------------------- */
.automationNodeClass {
 text-align: center;
 vertical-align: middle;
 border: 1px solid lightgray;
 background: #0168b2;
 color: white;
}


/*--------------------------------- */
/* CONTECT MENU WHITE */
/*--------------------------------- */
.context_menu {
 z-index:90;
 position:fixed;
 display:none;
 background: #fff;
 border: solid 1px lightgray; 
 box-shadow:2px 2px 4px lightgrey;
 max-width:300px;
 padding:10px;
 margin:10px;
 font-size: 0.8em;
 color: #000;
 overflow-y:auto; /* vertical */
 overflow-x:hidden; /* horizontal */
 border-radius:5px;
}


/*--------------------------------- */
/* CONTECT MENU BLACK */
/*--------------------------------- */
/*
.context_menu {
 z-index:90;
 position:fixed;
 display:none;
 #background: #f2f2f2;
 background: #000;
 border: solid 1px lightgray; 
 box-shadow:2px 2px 4px lightgrey;
 max-width:300px;
 padding:10px;
 margin:10px;
 font-size: 0.8em;
 #color: #3b3b3b;
 color: #fff;
 overflow-y:auto;
 overflow-x:hidden;
 border-radius:5px;
}
*/


/*top, right, bottom, left */


.login_radio {
 font-size: 16px;
 padding: 5px 5px 5px 5px;
}

.login_input {
 width:250px;
 font-size: 22px;
 padding: 5px 5px 5px 5px;
}

.tip_balloonx {
 display:block; 
 width:300px; 
 z-index:95;
}

.charts {
}

.chartsdiv {
 background: white;
 margin-top:20px!important;
}





.mhb_wrapper {/*top, right, bottom, left */
/* background:#fafafa; */
 border: solid 0px lightgray; /*1px*/
 padding: 2px 2px 2px 12px;
 width:95%;
 font-size:0.8em;
 margin-top:-20px;
}

.mhb {
 color:#777;

}

.mhb:hover { 
 color: black;
}

#selectq_input::placeholder {
 color: white;
 border: 0px solid red;
 opacity: 1; /* Firefox */
}


/*--------------------------------- */
/* BODY */
/*--------------------------------- */


body {
 position: relative;
 background: #f2f2f2;
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 16px;
 line-height: 20px;
 font-weight: 400;
 color: #3b3b3b;
}

body.en {
 padding-left:60px;
}

body.es {
 padding-left:60px;
}


body.he {
 padding-right:60px;
}


@media only screen and (max-width: 480px) {
 body.en {
 padding-left:0px;
 }
 body.es {
 padding-left:0px;
 }
 body.he {
 padding-right:0px;
 }
}

/*--------------------------------- */
/* PAGE AREAS */
/*--------------------------------- */


.page_menu {
 z-index:55;
 display:block;
 padding-top:0px;
 padding-bottom:0px;
 position:absolute;
 top: -10px;
 resize: horizontal;
 overflow-y:hidden; /* vertical */
 overflow-x:hidden; /* horizontal */
 height: 100%;
 width: 250px;
 background-color: #0168b2; /*light blue*/
}

.page_menu.en {
 right:0px;
 left:-210px;
 padding-right:0px;
 padding-left:10px;
 transition: left 0.3s;
}

.page_menu.es {
 right:0px;
 left:-210px;
 padding-right:0px;
 padding-left:10px;
 transition: left 0.3s;
}

.page_menu.he {
 left:0px;
 right:-210px;
 padding-right:10px;
 padding-left:0px;
 transition: right 0.3s;
}

@media only screen and (max-width: 480px) {
 .page_menu.en {
 left:-2000px;
 }

 .page_menu.es {
 left:-2000px;
 }

 .page_menu.he {
 right:-2000px;
 }
}

.login_page_empty_menu {
 display:block;
 position:absolute;
 top: -10px;
 height: 51px;
 width: 140px;
 background-color: #0168b2; /*light blue*/
 z-index:48;
}

.login_page_empty_menu.en {
 left:-10px;
}

.login_page_empty_menu.es {
 left:-10px;
}

.login_page_empty_menu.he {
 right:-10px;
}




/*--------------------------------- */
/* HEADER */
/*--------------------------------- */
.page_header {
 position:relative;
 top: -10px;
 overflow: hidden;
 width: 100%;
 height:41px;
 vertical-align:middle;
 background-color: #014e86; /*dark bluw*/
 padding:5px;
}


@media only screen and (max-width: 480px) {
}

.page_header.en {
 left: -10px;
 padding-left:10px;
}

.page_header.es {
 left: -10px;
 padding-left:10px;
}

.page_header.he {
 right: -10px;
 padding-right:10px;
}




.side_menu_icon {
 position:absolute;
 top: -10px;
 overflow: hidden;
 width: 40px;
 height:41px;
 vertical-align:middle;
 background-color: #0168b2; 
 margin:0px;
 padding:5px;
 z-index:48;
}

.side_menu_icon.en {
 left: -10px;
}

.side_menu_icon.es {
 left: -10px;
}

.side_menu_icon.he {
 right: -10px;
}







.page_header_table {
 top: 0px;
 right: 0px;
 overflow: hidden;
 width: 100%;
 vertical-align:middle;
 z-index:43;

}

.page_header_table td {
 vertical-align:middle;
}

.logo {
 height: 30px;
 width: 140px;
 padding-top:6px;
}

@media only screen and (max-width: 480px) {
 .logo {
 height: 20px;
 width: 93px;
 }
}


.language-selector {
 background-color: #f9f9f9;
 border-radius: 0px;
 font-family: Arial;
 color: black;
 font-size: 12px;
 text-decoration: none;
 margin: 5px;
 border:solid 1px black; 
 border-color: #000; 
}


/*--------------------------------- */
/* SIDE MENU */
/*--------------------------------- */

.menu_icons {
 height:24px; 
 width:24px;
 padding-left: 50px;
 text-align:center;
}


.main_menu_button { 
 background-color: #0168b2; /*light blue*/
 border-radius: 0px;
 font-family: Arial;
 color: white;
 font-size: 16px;
 padding: 14px 0px 5px 16px; /*top, right, bottom, left */
 text-decoration: none;
 margin: 1px;
 text-transform: uppercase!important;
 border: none;
 outline: 0;
 text-align:center;
 cursor:pointer;
 } 

.main_menu_button:hover { 
 text-decoration:underline;
 } 

.sub_menu_button {
 display: block;
 font-family: Arial;
 color: white;
 text-decoration: none;
 font-size: 14px;
 padding: 3px 0px 0px 20px; /*top, right, bottom, left */
 margin: 0px 0px 0px 0px;
}


.sub_menu_button:hover {
 text-decoration:underline;
 color: white;
}

.submenu {
 display: none;
 margin-left: 20px;
 padding: 0px 0px 0px 0px;
 /*transition: visibility 0s, opacity 0.5s linear;*/
}



/*
.side_menu_burger {
 width:20px;
 height:20px;
 margin:3px;
 font-size:18px;
 color:white;
}

.side_menu_burger:hover {
 font-size:20px;
 color:yellow;
}
*/

.side_menu_horizontal_shortcuts{
 display:block;
 position:absolute;
 top:100px;
}
.side_menu_horizontal_shortcuts.en{
 left:20px;
 transition: top 0.5s;
}
.side_menu_horizontal_shortcuts.es{
 left:20px;
 transition: top 0.5s;
}
.side_menu_horizontal_shortcuts.he{
 right:20px;
 transition: right 0.3s;
}


.side_menu_vertical_shortcuts {
 display:block;
 position:absolute;
 top:100px;
 width:50px;
 transition: top 0.6s;
 text-align: center;
}
.side_menu_vertical_shortcuts.en {
 left:203px;
}
.side_menu_vertical_shortcuts.es {
 left:203px;
}
.side_menu_vertical_shortcuts.he {
 right:203px;
}


.logo_in_side_menu.en {
 text-align:left; 
 padding-left:0px;
}

.logo_in_side_menu.es {
 text-align:left; 
 padding-left:0px;
}

.logo_in_side_menu.he {
 text-align:right; 
 padding-left:0px;
}

.burger_in_side_menu.en {
 text-align:right; 
 position: absolute;
 right: 20px;
 top: 5px;
}

.burger_in_side_menu.es {
 text-align:right; 
 position: absolute;
 right: 20px;
 top: 5px;
}

.burger_in_side_menu.he {
 text-align:left; 
 position: absolute;
 left:20px;
 top: 5px;
}


/*--------------------------------- */
/* DATA TABLES TITLE */
/*--------------------------------- */

.new_title {
 vertical-align:top;
 text-transform: uppercase!important;
 font-size: 22px;
 line-height: 30px;
 word-wrap:break-word;
 padding:12px 12px 2px 12px;
 xcolor: #8E8E8E;
 color: #c30019;
}

/*top, right, bottom, left */
.table_title {
 margin: 0px 10px 20px 10px;
 padding: 0px;
 display: table;
 background: white;
 border-top-left-radius: 3px;
 border-top-right-radius: 3px;
 border: solid 1px lightgray; 
 box-shadow:2px 2px 4px lightgrey;
 min-width:95%;
 }

.row_title {
 display: table-row;
}

.cell_title {
 display: table-cell;
 xpadding-bottom:25px;
}

hr.style-two_backup {
 border: 1;
 height: 1px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}


hr.style-two {
 border-top: 1px solid #8c8b8b;
 border-bottom: 1px solid #fff;
}

/*
hr.style-three {
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, rgba(255, 255, 255, 255), rgba(0, 0, 0, 0.75));
}

*/

hr.style-three {
 border: 0;
 height: 1px;
 background-image: linear-gradient(to right, rgba(0, 0, 0, 0.75), rgba(255, 255, 255, 255));
}

/*--------------------------------- */
/* DATA TABLES */
/*--------------------------------- */
/*top, right, bottom, left */
.report_wrapper {
 border: solid 0px lightgray; /*1px*/
 padding: 2px 12px 2px 12px;
 margin-bottom:10px;
 /* removed 10/21/2019
 width:95%;
 */
}

@media only screen and (max-width: 480px) {
 .report_wrapper {
 border: none;
 padding: 12px 12px 12px 12px;
 padding: 0;
 /* removed 10/21/2019
 width:95%;
 */
 }
}


.report_header_hr {
 width:0%; /*100%*/
 color:gray;
}

.table {
 margin: 2px 10px 2px 10px;
 display: table;
 min-width:95%;
 #border:1px solid green;
}



.tableVertical {/*top, right, bottom, left */
 margin: 2px 10px 2px 10px;
 display: table;
}





.row {
 display: table-row;
/* background: white;*/
/* border:solid 1px #EBF5FB;

 border-bottom: 1px solid #EBF5FB;
 border-top: 1px solid #EBF5FB; */

}

/*
.row:hover {
 display: table-row;
 background: #f7f7f7;
 border:solid 1px #EBF5FB;
}
*/

/*
.row:nth-of-type(odd) {
 background: white;
}
*/

.row.header {
 background-color:#fff; /*#F8F8F8*/
 color: #051d39;
 font-size: 16px;
 margin-bottom: 10px;
}

.framed {
 border-top: 2px solid #81899c;
 border-bottom: 1px solid #81899c;
 border-right: 1px solid #81899c;
 background-color: #dde1e3;
 box-sizing: border-box;
}

.gray-bg {
 background-color: #dde1e3;
}


.row.title {
 color: #34bfa3;
 font-weight: 700; 
 font-size: 20px;
}

.cell {
 padding: 6px 12px;
 display: table-cell;
 vertical-align:middle;
 position: relative;
}


.title {
 min-width: 300px;
 padding: 23px 0px 3px 0px; /*top, right, bottom, left */
 vertical-align:top;
 color: #051d39;
 text-transform: uppercase!important;
 font-size: 22px;
 word-wrap:break-word;
 margin-left:20px;
 margin-right:20px;
}

.entry_name {
 left: 11px;
 right: 11px;
 background-color: #04AA6D!important;
 font-family: 'Source Sans Pro', sans-serif;
 padding: 6px 18px;
 border-radius: 2px;
 color: #FFFFFF;
 position:relative;
}


.user_name {
 left: 11px;
 right: 11px;
 background-color: #0066cc;
 font-family: 'Source Sans Pro', sans-serif;
 padding: 6px 18px;
 border-radius: 12px;
 xborder: ridge 3px #91bfeb;
 color: #FFFFFF;
 position:relative;
}

.gago_name {
 left: 11px;
 right: 11px;
 background-color: black;
 font-family: 'Source Sans Pro', sans-serif;
 padding: 6px 18px;
 border-radius: 12px;
 xborder: ridge 3px gray;
 color: #FFFFFF;
 position:relative;
}

.title_query {
 padding: 10px 0px 10px 0px; /*top, right, bottom, left */
 margin-left:20px;
 margin-right:20px;
 word-wrap:break-word;
 font-family: Verdana, Geneva, sans-serif;
 font-size: 25px;
 letter-spacing: -0.5px;
 word-spacing: -1px;
 color: #8E8E8E;
 font-weight: 400;
 line-height: 1.5em;
}

.subtitle {
 margin-top: 10px;
 color: darkgray;
 font-size: 18px;
 word-wrap:break-word;
 padding:10px 12px 0px 12px;
}

.yellow_note {
 position: relative;
 left:20px;
 background-color: #FFC;
 padding: 1rem;
 box-shadow: 0px 1px 5px lightgray;
 xfont-size: 1.1em;
 line-height: 24px;
}


/*--------------------------------- */
/* KPI TABLE */
/*--------------------------------- */

.kpi-table {
 text-align:center;
 margin: 5px;
 display: table;
 border: solid 1px lightgray; 
 box-shadow:2px 2px 8px lightgrey; 
 }

.kpi-row {
 display: table-row;
 background: #fff;
}

.kpi-cell {
 border-right: 5px ;
 text-align:center;
 color: #fff;
 font-size: 32px;
 display: table-cell;
 width: 75px;
 background: #4ab3fd;
}


/*--------------------------------- */
/* SELECT */
/*--------------------------------- */




/*--------------------------------- */
/* BUTTONS */
/*--------------------------------- */

.apibutton {
 background-color: #0168b2;
 border-radius: 0px;
 font-family: Arial;
 border: solid 1px gray;
 color: white;
 font-size: 12px;
 padding: 5px 5px 5px 5px;
 margin: 0px;
 width:40px;
 height:40px;
 text-align:center;
 cursor:pointer;
}

.login_button {
 border: solid 1px white;
 background-color: #15CD72;
 color: white;
 font-family: Arial;
 font-size: 22px;
 padding: 5px 5px 5px 5px;
 text-decoration: none;
 margin: 10px 10px 10px 10px;
 width:235px;
 cursor:pointer;
}

.login_button:hover {
 border: solid 1px #15CD72;
 background-color: white;
 color: black;
}

.button {
 background-color: white;
 border-radius: 0px;
 font-family: Arial;
 border: solid 1px gray;
 color: black;
 font-size: 16px;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 margin: 40px 22px 10px 22px;
 cursor:pointer;
}

.no_margin {
 margin: 0;
}

.borderless {
 border:0;
}

.align_left {
 text-align:right;
}

.button:hover {
 background-color: #34bfa3;
 border: solid 1px gray;
 color: white;
}

.button.remove:hover {
 background-color: red;
 border: solid 1px white;
 color: white;
}

.buybutton {
 background-color: #15CD72;
 border-radius: 5px;
 font-family: Arial;
 border: solid 1px white;
 color: white;
 font-size: 16px;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 margin: 0px;
 width:70px;
 cursor:pointer;
}


.buybutton:hover {
 background-color: white;
 border: solid 1px #15CD72;
 color: #15CD72;
}




.pretend_button {
 background: red;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 200px;
 cursor:pointer;
}

.login_info_button {
 background: green;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 200px;
 cursor:pointer;
}

.app_view_button {
 background: orange;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 200px;
 cursor:pointer;
}

.awards_view_button {
 background: yellow;
 font-family: Arial;
 border: none;
 color: black;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 200px;
 cursor:pointer;
}

.permissions_view_button {
 background: green;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 200px;
 cursor:pointer;
}




.smallbutton {
 background-color: white;
 border-radius: 0px;
 font-family: Arial;
 border: none;
 color: black;
 font-size: 14px;
 padding-top: 3px;
 padding-right: 5px;
 padding-bottom: 3px;
 padding-left: 5px;
 text-decoration: none;
 margin-top: 3px;
 margin-right: 5px;
 margin-bottom: 0px;
 margin-left: 5px;
 cursor:pointer;
}


.smallbutton:hover {
 background-color: #34bfa3;
}


.button_lot_menu {
 background-color: white;
 font-family: Arial;
 border: none;
 color: black;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 100%;
}

.linkbutton {
 background: #0168b2; /* Blue */
 background-image: -webkit-linear-gradient(top, #0168b2, #0168b2);
 background-image: -moz-linear-gradient(top, #0168b2, #0168b2);
 background-image: -ms-linear-gradient(top, #0168b2, #0168b2);
 background-image: -o-linear-gradient(top, #0168b2, #0168b2);
 background-image: linear-gradient(to bottom, #0168b2, #0168b2);
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 5px 5px 5px 5px;
 margin: 1px 1px 1px 1px;
 text-decoration: none;
 width: 200px;
 cursor:pointer;
}


.bigbutton {
 background: #0168b2; /* Blue */
 background-image: -webkit-linear-gradient(top, #0168b2, #0168b2);
 background-image: -moz-linear-gradient(top, #0168b2, #0168b2);
 background-image: -ms-linear-gradient(top, #0168b2, #0168b2);
 background-image: -o-linear-gradient(top, #0168b2, #0168b2);
 background-image: linear-gradient(to bottom, #0168b2, #0168b2);
 font-family: Arial;
 border: none;
 color: white;
 font-size: 24px;
 padding: 10px 10px 10px 10px;
 margin: 5px 5px 5px 5px;
 text-decoration: none;
 width: 250px;
 cursor:pointer;
}



.menubutton { 
 background: #0168b2 ; /* some blue */
 background-image: -webkit-linear-gradient(top, #0168b2, #0168b2);
 background-image: -moz-linear-gradient(top, #0168b2, #0168b2);
 background-image: -ms-linear-gradient(top, #0168b2, #0168b2);
 background-image: -o-linear-gradient(top, #0168b2, #0168b2);
 background-image: linear-gradient(to bottom, #0168b2, #0168b2);
 border-radius: 0px;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 3px 6px 3px 6px;
 text-decoration: none;
 margin: 1px;
 } 

.greenbutton { 
 background: #33cc33; /* Green */
 background-image: -webkit-linear-gradient(top, #33cc33, #33cc33);
 background-image: -moz-linear-gradient(top, #33cc33, #33cc33);
 background-image: -ms-linear-gradient(top, #33cc33, #33cc33);
 background-image: -o-linear-gradient(top, #33cc33, #33cc33);
 background-image: linear-gradient(to bottom, #33cc33, #33cc33);
 border-radius: 0px;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 16px;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 margin: 10px;
 } 

.importantbutton {
 background: #f44336; /* Red */
 background-image: -webkit-linear-gradient(top, #f44336, #f44336);
 background-image: -moz-linear-gradient(top, #f44336, #f44336);
 background-image: -ms-linear-gradient(top, #f44336, #f44336);
 background-image: -o-linear-gradient(top, #f44336, #f44336);
 background-image: linear-gradient(to bottom, #f44336, #f44336);
 --border-radius: 5px;
 font-family: Arial;
 border: none;
 color: white;
 font-size: 22px;
 text-decoration: none;
 padding:5px;
 margin: 0px 22px 0px 20px; /*top, right, bottom, left */
 cursor: pointer;
 } 


/*--------------------------------- */
/* UTILS PAGES */
/*--------------------------------- */

.mass_update_page {
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 16px;
}

.mass_update_page h1{
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 28px;
}

.mass_update_page h2{
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 20px;
}

.step_wrapper {
 position: relative;
 height: 450px;
 float:left;
 width: 300px;
 background: #fff;
 margin: 0 auto;
 padding: 10px 17px;
 -webkit-box-shadow: 0px 0px 0px 2px rgba(0,0,0,0.35);
}

.step_wrapper_buttons { /*step_wrapper_buttons*/
 position: absolute;
 bottom: 0px;
 left: 20px;
 width: 95%;
 border-top: 1px solid rgb(222, 222, 222);
 padding-top: 6px;
 padding-bottom: 6px;
}
#myProgress {
 width: 100px;
 position: relative;
 background-color: #ddd;
}

#myBar {
 width: 1%;
 height: 15px;
 position: relative;
 background-color: #4CAF50;
}




/*--------------------------------- */
/* HTML DEFAULTS */
/*--------------------------------- */

h1 {
 display: inline;
 color: #7C7878; 
 font: 24px Verdana, monospace;
}

h2 {
 display: inline;
 color: #7C7878; 
 font: 16px Verdana, monospace;
}



a {
 color: #5867dd;
 text-decoration: none;
}

a:hover {
 color: #5867dd;
 text-decoration: underline;
}


/*--------------------------------- */
/* USER SAERCH */
/*--------------------------------- */


 /* top right bottom left */


 .user_search_results_wrapper_div {
 width:95%; 
 padding:5px 5px 5px 5px; 
 margin: 5px 5px 5px 0px; 
 background:white;
 }

 .user_search_table {
 display: table;
 width:100%;
 }

 .user_search_row {
 cursor:pointer;
 display: table-row;
 width:100%;
 }

 .user_search_row:hover {
 display: table-row;
 width:100%;
 background: #f2f2f2;
 }

 .user_search_cell {
 padding: 0px 2px 0px 2px;
 display: table-cell;
 vertical-align:middle;
 border-top: 0px solid #f2f2f2;
 line-height:30px;
 width:120px;
 }

 .user_search_cell.narrow {
 width:20px;
 }




/*--------------------------------- */
/* ADMIN SAERCH */
/*--------------------------------- */

 /* top right bottom left */

 .admin_search_results_title_div {
 width:98%; 
 padding:5px 5px 5px 5px; 
 margin: 0px 0px 5px 0px; 
 color:white;
 }
 
 .admin_search_results_wrapper_div {
 width:95%; 
 padding:5px 5px 5px 5px; 
 margin: 5px 5px 5px 0px; 
 background:white;
 }

 .admin_search_table {
 display: table;
 width:100%;
 }

 .admin_search_row {
 display: table-row;
 width:100%;
 }

 .admin_search_cell {
 padding: 2px 2px;
 display: table-cell;
 vertical-align:middle;
 border-top: 1px solid #f2f2f2;
 }


 .pretend_button_small {
 background: red;
 font-family: Arial;
 border: 1px solid white;
 color: white;
 font-size: 0.8em;
 padding: 0px;
 margin: 0px;
 text-decoration: none;
 height: 30px;;
 width: 30px;;
 }

 .pretend_button_small:hover {
 background: white;
 border: 1px solid red;
 color: red;
 }



 .gago_button_small {
 background: black;
 font-family: Arial;
 border: 1px solid white;
 color: white;
 font-size: 0.8em;
 padding: 0px;
 margin: 0px;
 text-decoration: none;
 height: 30px;;
 width: 30px;;
 }

 .gago_button_small:hover {
 background: white;
 border: 1px solid black;
 color: black;
 }







/*--------------------------------- */
/* OTHER */
/*--------------------------------- */
.whitebackgroud {
 background: #fff;
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 14px;
 line-height: 20px;
 font-weight: 400;
 color: #000;
}


.wrapper {
 margin: 0 auto;
 padding: 10px;
 max-width: 800px;
}


div.xwrapper {
 display: block;
}

.highlight {
 background-color: yellow;
}



.hide_on_mobile {

}


select{
 font-family: "Helvetica Neue", Helvetica, Arial;
 font-size: 16px;
 padding: 3px;
}



.vl {
 border-left: 1px solid green;
 height: 25px;
 margin-left: 10px;
}




.admin-panels {
 margin-right:10px;
 display:none;
 border-radius: 3px; 
 border: 1px solid lightgray; 
 box-shadow:2px 2px 4px lightgrey;
 position:absolute;
 background:white;
 z-index:90;
 top:100px;
 padding:5px;

}


.connected_entries_select {
 width: 300px;
}

.connected_entries_select option {
 padding: 5px;
 cursor: pointer;
}

.connected_entries_select option:hover {
 background-color: #0168b2;
 color: white;
}


.save_button {
 position: absolute;
 background-color: white;
 border-radius: 0px;
 font-family: Arial;
 border: solid 1px gray;
 color: black;
 font-size: 16px;
 padding: 5px 10px 5px 10px;
 text-decoration: none;
 cursor: pointer;
}

.save_button:hover {
 background-color: #34bfa3;
 border: solid 1px gray;
 color: white;
}


.full-image-overlay {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
 display: flex;
 align-items: center;
 justify-content: center;
}

.full-image {
 max-width: 90%;
 max-height: 90%;
}