@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {margin: 0;padding: 0;border: 0;font-family: var(--Roboto-font-family);font-size: 100%;vertical-align: baseline;background: transparent;}
article, aside, figure, footer, header, nav, section, details, summary {display: block;}

html {-webkit-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;}
*::-webkit-scrollbar {width: 7px;}
*::-webkit-scrollbar-track {background-color: #999999;}
*::-webkit-scrollbar-thumb {background: #000000;}
* {scrollbar-color: #000000 #999999;scrollbar-width: thin;}

*,*:before,*:after {-webkit-box-sizing: inherit;box-sizing: inherit;}

:root {
  --orange: #EB6F24;
  --white: #FFFFFF;
  --gray: #313131;
  --lightgray: #C2C2C2;
  --dark: #101010;

  --Roboto-font-family: 'Roboto', sans-serif;
}
:focus{outline: none !important;box-shadow: 0 0 0 1px rgba(235, 111, 36, 0.4) !important;border-color: var(--orange) !important;}

::selection {background: var(--orange);}

.form-floating>.form-control:not(:placeholder-shown)~label::after{background-color: transparent;}

img {max-width: 100%;height: auto;}
/* ul {display: flex;flex-direction: column;list-style: none;gap: 10px;} */
a {margin: 0;padding: 0;text-decoration: none;vertical-align: baseline;background: transparent;}
a:focus, a:hover {text-decoration: none;vertical-align: baseline;background: transparent;}
p{margin-bottom: 10px;}
hr {display: block;height: 1px;border: 0;border-top: 1px solid #999999;margin: 0;padding: 0;}
strong{font-weight: bold;}
small{font-size: 80%;}
label{font-size: 16px;font-weight: 400;color: var(--lightgray);}
label span{color: #eb2424;}
input, select {vertical-align: middle;}
input, label, textarea, select, input, option, button {outline: none;}
.form-check-input:checked{background-color: var(--orange);border-color: var(--orange);}

table {width: 100%;background-color: #FFFFFF;border-collapse: collapse;border: 1px solid var(--gray);color: var(--gray);}
table .active{background-color: inherit;position: relative;padding-left: 20px;color: #24eb4c;}
table .active::before{content: "";position: absolute;top: 7px;left: 0;width: 10px;height: 10px;border-radius: 50%;background-color: #24eb4c;animation: myactive 1s linear 2s infinite alternate;}
table .inactive{background-color: inherit;position: relative;padding-left: 20px;color: #eb2424;}
table .inactive::before{content: "";position: absolute;top: 7px;left: 0;width: 10px;height: 10px;border-radius: 50%;background-color: #eb2424;}
table tr:not(:last-child){border-bottom: 1px solid #484848;}
table td {padding: 5px;background-color: var(--gray);color: var(--lightgray);  vertical-align: middle;}
table .tr.tr-red td{background-color: #ad0011;color: #FFFFFF;}
table .tr.tr-gray td{background-color: #a3a3a3;color: #FFFFFF;}
/* table .tr.tr-orange td{background-color: #eb6f24;color: #FFFFFF;} */
table .tr.tr-orange td{background-color: #d37740;color: #FFFFFF;}
table .tr.tr-orange td .button.icon{border: 1px solid #FFF;}
table .tr.is-offline td:nth-child(5),table .tr.is-offline td:nth-child(6), table .tr.is-offline td:nth-child(7), table .tr.is-offline td:nth-child(8){filter: blur(3px); -webkit-filter: blur(3px);cursor: no-drop;}
table .tr.is-offline td .btn{    cursor: no-drop;
}

table .tr.is-offline{position: relative;}
table .tr.is-offline:after{content: "Device is offline";position: absolute;top: 50%;left: 65%;transform: translate(-50%, -50%);display: flex;align-items: center;justify-content: center;font-size: 22px;font-weight: 600;line-height: 1;z-index: 1;color: #FFFFFF;}
table .tr.is-offline td:nth-child(5) a,table .tr.is-offline td:nth-child(6) a, table .tr.is-offline td:nth-child(7) a, table .tr.is-offline td:nth-child(8) a{cursor: no-drop;}
table td p{margin-bottom: 0;}
table th {border-bottom: 1px solid var(--orange);padding: 5px;white-space: nowrap;color: var(--orange);}
table thead {background-color: var(--gray);color: var(--dark);}
.ht{display: none;font-size: 12px;line-height: 1;white-space: nowrap;}

@keyframes myactive {
  0%   {box-shadow: 0 0 2px 1px #24eb4c;}
  25%  {box-shadow: 0 0 0px 0px #24eb4c;}
  50%  {box-shadow: 0 0 2px 1px #24eb4c;}
  75%  {box-shadow: 0 0 0px 0px #24eb4c;}
  100% {box-shadow: 0 0 2px 1px #24eb4c;}
}



.button, .button:focus, .button:active {display: inline-block;font-size: 16px;font-weight: 400;background: var(--orange);color: #FFFFFF;line-height: 1;border: 1px solid transparent;border-radius: 5px;letter-spacing: .5;text-transform: uppercase;cursor: pointer;outline: none;padding: 10px 20px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.resetdefault_button, .resetdefault_button:focus, .resetdefault_button:active {display: inline-block;font-size: 10px;font-weight: 500;background: var(--orange);color: #FFFFFF;line-height: 1;border: 1px solid transparent;border-radius: 5px;letter-spacing: .5;text-transform: uppercase;cursor: pointer;outline: none;padding: 7px 10px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.resetdefault_button:hover, .resetdefault_button:focus {background: var(--dark);color: #FFFFFF;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button:hover, .button:focus {background: var(--dark);color: #FFFFFF;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button_dark, .button_dark:focus, .button_dark:active {display: inline-block;font-size: 16px;font-weight: 400;background: var(--gray);color: #FFFFFF;line-height: 1;border: 1px solid transparent;border-radius: 5px;letter-spacing: .5;text-transform: uppercase;cursor: pointer;outline: none;padding: 10px 20px;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button_dark:hover, .button_dark:focus {background: var(--dark);color: #FFFFFF;outline: none;transition: all 0.3s ease;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-ms-transition: all 0.3s ease;-o-transition: all 0.3s ease;}

.button.icon{padding: 6px;}

.link{color: var(--orange);}
.link:hover{color: var(--white);}

h1, h2, h3, h4, h5, h6{display: block;line-height: 1;}
h1 {font-size: 48px;font-weight: 900;margin-bottom: 20px;}
h2 {font-size: 40px;font-weight: 900;margin-bottom: 20px;}
h3 {font-size: 32px;font-weight: 700;margin-bottom: 15px;}
h4 {font-size: 26px;font-weight: 700;margin-bottom: 15px;}
h5 {font-size: 22px;font-weight: 500;margin-bottom: 10px;}
h6 {font-size: 18px;font-weight: 500;margin-bottom: 10px;}

h5 .text-white{color: #FFFFFF;}


.modal .modal-dialog .modal-content .modal-header{background-color: var(--orange);}
.modal .modal-dialog .modal-content .modal-header .modal-title{color: #FFFFFF;}
.modal .modal-dialog .modal-content .modal-header .btn-close{opacity: 1;}
.modal .modal-dialog .modal-content .modal-body{background-color: #313131;}
.modal .modal-dialog .modal-content .modal-header { border-bottom: #313131 solid; }

#changePassword .modal-dialog .modal-content .modal-body{background-color: var(--gray);}
#changePassword .modal-dialog .modal-content .modal-footer{background-color: var(--gray);}

.card{background-color: var(--gray);}
.card .card-header{color: var(--lightgray);font-weight: 600;}
.card .card-body .form-control, .card .card-body .form-select{background-color: var(--lightgray);}

.accordion .accordion-item{border: 0;}
.accordion .accordion-item .accordion-header .accordion-button{padding: 10px;background-color: var(--gray);color: var(--orange);}
.accordion .accordion-item .accordion-header .accordion-button:focus{border-color: inherit !important;box-shadow: inherit !important;border-bottom: 1px solid var(--lightgray);}
.accordion .accordion-item .accordion-header .accordion-button::after{content: "\f0b0";font-family: "Font Awesome 5 Free"; font-weight: 900;transform: inherit;background-image: inherit;}
.accordion .accordion-item .accordion-body{background-color: var(--gray);}

.dashboard-content .pagination nav[role="navigation"]{  margin-top: 20px;  width: 100%;}
.dashboard-content .pagination nav[role="navigation"] div:nth-child(1){display: none;}
.dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative.z-0{display: flex;align-items: center;justify-content: center;}
.dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > *,
.dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > * span{width: 50px;height: 42px;text-align: center;line-height: 1;display: flex;align-items: center;justify-content: center;background-color: var(--gray) !important;color: var(--orange) !important;}
.dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > a{background-color: var(--orange) !important;color: var(--gray) !important;}
.dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > * svg{width: 30px;border: 0;height: 30px;}
/* .active:bg-gray-100 */


/* login page */
.login_page{display: flex;align-items: center;justify-content: center;width: 100%;min-height: 100vh;background-color: var(--dark);background-image: url("../images/stardust.png");padding: 40px 0;}
.login_page .logo_box{display: block;width: 100%;text-align: center;margin-bottom: 40px;}
.login_page .boxwrap{display: block;width: 100%;padding: 40px;background-color: var(--gray);  border-radius: 20px 40px 20px 40px;}
.login_page .boxwrap h2{color: var(--white);}
.login_page .boxwrap p{color: var(--white);}
.login_page .boxwrap .fbox{display: flex;align-items: center;justify-content: space-between;}


.dashboard {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;min-height: 100vh;background-color: var(--dark);}
.dashboard-app {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-box-flex: 2;-webkit-flex-grow: 2;-ms-flex-positive: 2;flex-grow: 2;margin-top: 84px;}
.dashboard-content {-webkit-box-flex: 2;-webkit-flex-grow: 2;-ms-flex-positive: 2;flex-grow: 2;padding: 25px;background-image: url(../images/dark-stripes.png);}
.dashboard-nav {min-width: 250px;position: fixed;left: 0;top: 0;bottom: 0;overflow: auto;background-color: var(--dark);}


.dashboard-nav {-webkit-box-sizing: border-box;box-sizing: border-box;scroll-behavior: smooth;-ms-overflow-style: none;scrollbar-width: none; }
.dashboard-nav::-webkit-scrollbar {display: none;}
.dashboard-nav::-webkit-scrollbar-track {display: none;}
.dashboard-nav::-webkit-scrollbar-thumb {display: none;}


.dashboard-compact .dashboard-nav {display: none;}
.dashboard-nav header {min-height: 84px;padding: 8px 27px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;border-bottom: 1px solid var(--gray);}
.dashboard-nav header .menu-toggle {display: none;margin-right: auto;}
.dashboard-nav header .brand-logo{display: block;width: 100%;line-height: 1;text-align: center;}
.dashboard-nav a {color: #515151;}
.dashboard-nav a:hover {text-decoration: none;}
.dashboard-nav {background-color: var(--dark);}
.dashboard-nav a {color: #fff;font-size: 14px;}
.brand-logo {font-family: "Nunito", sans-serif;font-weight: bold;font-size: 20px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;color: #515151;
-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
.brand-logo:focus, .brand-logo:active, .brand-logo:hover {color: #dbdbdb;text-decoration: none;}
.brand-logo i {color: #d2d1d1;font-size: 27px;margin-right: 10px;}
.dashboard-nav-list {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.dashboard-nav-item {min-height: 56px;padding: 8px 20px 8px 70px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;letter-spacing: 0.02em;transition: ease-out 0.5s;}
.dashboard-nav-item i {width: 36px;font-size: 19px;margin-left: -40px;}
.dashboard-nav-item:hover {background: rgba(255, 255, 255, 0.04);}
.active {background: rgba(255, 255, 255, 0.1);}
.dashboard-nav-dropdown {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.dashboard-nav-dropdown.show {background: rgba(255, 255, 255, 0.04);}
.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle {font-weight: bold;}
.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-toggle:after {-webkit-transform: none;-o-transform: none;transform: none;}
.dashboard-nav-dropdown.show > .dashboard-nav-dropdown-menu {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
.dashboard-nav-dropdown-toggle:after {content: "";margin-left: auto;display: inline-block;width: 0;height: 0;border-left: 5px solid transparent;border-right: 5px solid transparent;
border-top: 5px solid rgba(81, 81, 81, 0.8);-webkit-transform: rotate(90deg);-o-transform: rotate(90deg);transform: rotate(90deg);}
.dashboard-nav .dashboard-nav-dropdown-toggle:after {border-top-color: rgba(255, 255, 255, 0.72);}
.dashboard-nav-dropdown-menu {display: none;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;}
.dashboard-nav-dropdown-item {min-height: 40px;padding: 8px 20px 8px 70px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;
-webkit-align-items: center;-ms-flex-align: center;align-items: center;transition: ease-out 0.5s;}
.dashboard-nav-dropdown-item:hover {background: rgba(255, 255, 255, 0.04);}
.menu-toggle {position: relative;width: 42px;height: 42px;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: center;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;
color: var(--dark);}
.menu-toggle:hover, .menu-toggle:active, .menu-toggle:focus {text-decoration: none;color: var(--dark);}
.menu-toggle i {font-size: 28px;color: var(--white);}
.dashboard-toolbar {display: flex;align-items: center;justify-content: space-between; min-height: 84px;background-color: var(--dark);display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-align: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;padding: 8px 27px;position: fixed;top: 0;right: 0;left: 0;z-index: 1000;border-bottom: 1px solid var(--gray);background-image: url(../images/dark-stripes.png);}
.dashboard-toolbar .user{display: flex;align-items: flex-start;flex-direction: column;gap: 8px;padding: 5px 0px 5px 20px;border-left: 2px solid var(--white);}
.dashboard-toolbar .user strong{display: block;font-size: 16px;line-height: 1;color: var(--orange);text-transform: uppercase;}
.dashboard-toolbar .user span{display: block;font-size: 12px;line-height: 1;color: var(--white);letter-spacing: 1px;}
.nav-item-divider {height: 1px;margin: 1rem 0;overflow: hidden;background-color: var(--gray);}


.dashboard_main .card{width: 100%;background-color: var(--dark);border: 1px solid #000000;border-radius: 20px;box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}
.dashboard_main .card .card-body{display: flex;flex-direction: column;justify-content: space-between;gap: 20px;}
.dashboard_main .card .card-body .card-title{display: block;width: 100%;font-size: 16px;font-weight: 600;color: var(--white);}
.dashboard_main .card .card-body .card-title span{color: var(--orange);}
.dashboard_main .card .card-body a.numlink{font-size: 80px;margin-bottom: 0;color: var(--gray);text-shadow: 1px 1px 1px var(--orange);letter-spacing: 4px;display: inline;font-weight: 600;
line-height: 1;width: max-content;}
.dashboard_main .card .card-body a.numlink:hover{text-shadow: 2px 2px 1px var(--orange);}

.user_main{display: block;width: 100%;}
.user_main .head_title h1{display: block;font-size: 30px;font-weight: 600;color: var(--white);}
.add_user{display: block;width: 100%;}
.add_user .head_title h1{display: block;font-size: 30px;font-weight: 600;color: var(--white);}
.add_user .boxwrap{display: block;width: 100%;padding: 40px;background-color: var(--gray);  border-radius: 20px 40px 20px 40px;}
.add_user .boxwrap h2{color: var(--white);}
.add_user .boxwrap p{color: var(--white);}
.add_user .boxwrap .fbox{display: flex;align-items: center;justify-content: space-between;}
.add_user .boxwrap .form-control, .add_user .boxwrap .form-select{background-color: var(--lightgray);}


.add_crane{display: block;width: 100%;}
.add_crane .head_title h1{display: block;font-size: 30px;font-weight: 600;color: var(--white);}
.add_crane .boxwrap{display: block;width: 100%;padding: 40px;background-color: var(--gray);  border-radius: 20px 40px 20px 40px;}
.add_crane .boxwrap .lockingicons{cursor: pointer;}
.add_crane .boxwrap .lockingicons input[type="checkbox"]{display: none;}
.add_crane .boxwrap h2{color: var(--white);}
.add_crane .boxwrap p{color: var(--white);}
.add_crane .boxwrap .fbox{display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.add_crane .boxwrap .fbox label{min-width: 100px;}
.add_crane .boxwrap .fbox .form-switch{margin: 0;}
.add_crane .boxwrap .fbox .form-switch .form-check-input{width: 60px;height: 30px;}
.add_crane .boxwrap .fbox .fboxsub{display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.add_crane .boxwrap .fbox .fboxsub span{color: var(--lightgray);}
.add_crane .boxwrap .form-control, .add_crane .boxwrap .form-select{background-color: var(--lightgray);}
.add_crane .boxwrap .bootstrap-select{display: block;width: 100% !important;}
.add_crane .boxwrap .bootstrap-select .dropdown-toggle{background-color: var(--lightgray);border: var(--bs-border-width) solid var(--bs-border-color);}
.add_crane .boxwrap .bootstrap-select .dropdown-toggle::after{--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display: block;width: auto;padding: 5px 8px;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--bs-body-color);-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat: no-repeat;background-position: right 0 center;background-size: 16px 12px;border: 0;border-radius: var(--bs-border-radius);transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.bootstrap-select .dropdown-toggle .filter-option-inner-inner{white-space: wrap;}
.active {color: red;}

.add_crane .boxwrap .radio_lang{display: block;}
.add_crane .boxwrap .radio_lang .lang_btn{display: flex;justify-content: flex-start;align-items: center;gap: 10px;}
.add_crane .boxwrap .radio_lang .lang_btn .img_btn{display: block;position: relative;}
.add_crane .boxwrap .radio_lang .lang_btn .img_btn img{max-width:100px;height: auto;}
.add_crane .boxwrap .radio_lang .lang_btn .img_btn > input{display:none}
.add_crane .boxwrap .radio_lang .lang_btn .img_btn > img{cursor:pointer;border:5px solid transparent;}
.add_crane .boxwrap .radio_lang .lang_btn .img_btn > input:checked + img{border-color:var(--orange);border-radius:10px;}



/* .add_crane_info .boxwrap{display: block;width: 100%;}
.add_crane_info .boxwrap .lockingicons{cursor: pointer;}
.add_crane_info .boxwrap .lockingicons input[type="checkbox"]{display: none;}
.add_crane_info .boxwrap h2{color: var(--white);}
.add_crane_info .boxwrap p{color: var(--white);}
.add_crane_info .boxwrap .fbox{display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.add_crane_info .boxwrap .fbox label{min-width: 100px;}
.add_crane_info .boxwrap .fbox .form-switch{margin: 0;}
.add_crane_info .boxwrap .fbox .form-switch .form-check-input{width: 60px;height: 30px;}
.add_crane_info .boxwrap .fbox .fboxsub{display: flex;align-items: center;justify-content: space-between;gap: 20px;}
.add_crane_info .boxwrap .fbox .fboxsub span{color: var(--lightgray);}
.add_crane_info .boxwrap .form-label{color: var(--dark);}
.add_crane_info .boxwrap .form-control, .add_crane_info .boxwrap .form-select{background-color: var(--lightgray);}
.add_crane_info .boxwrap .bootstrap-select{display: block;width: 100% !important;}
.add_crane_info .boxwrap .bootstrap-select .dropdown-toggle{background-color: var(--lightgray);border: var(--bs-border-width) solid var(--bs-border-color);}
.add_crane_info .boxwrap .bootstrap-select .dropdown-toggle::after{--bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");display: block;width: auto;padding: 5px 8px;font-size: 1rem;font-weight: 400;line-height: 1.5;color: var(--bs-body-color);-webkit-appearance: none;-moz-appearance: none;appearance: none;background-color: transparent;background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);background-repeat: no-repeat;background-position: right 0 center;background-size: 16px 12px;border: 0;border-radius: var(--bs-border-radius);transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;} */
.cranedetailsmodal .modal-dialog .modal-content{background-color: var(--gray);}

.card.light{background-color: var(--lightgray);}
.card.light pre{color: var(--dark);}

.check_alive{display: flex;justify-content: flex-start;align-items: center;gap: 10px;}
.check_alive label{margin-bottom: 0px !important;}
.check_alive .form-control1 {
    width: 20px;
    height: 20px;
    margin: 0;
}
.check_alive .form-control1:checked{background-color: #d37740 !important;border-color: #d37740 !important;}

.has-eye{position: relative;}
.has-eye .password-toggle-icon{position: absolute;right: .75rem;top: 8px;z-index: 1;}

#compass {width: 200px;height: 200px;position: relative;border-radius: 50%;background: url('/public/images/compass_bg_new_1.png') no-repeat center center;background-size: cover;margin: 100px auto;}
.needle {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;transform-origin: center center;animation-duration: 6s;animation-iteration-count: infinite;}

/* #needle1 {width: 40px;height: 180px;} */
#needle1 {width: 45px;height: 170px;}

/* #needle2 {width: 21px;height: 191px;top: 5%;} */
#needle2 { width: 20px;height: 167px;top: 0%;}

/* .cm-table{display: block;width: 100%;} */
.cm-table{display: block;width: 100%;height: calc(100vh - 269px);}
.cm-table .MyTable thead{background-color: #000;position: sticky;top: 0;z-index: 111;}
  

.alaram_status .btnlabel{display: flex;flex-direction: column;align-items: center; gap: 5px;}
.alaram_status .btnlabel .label{width: 100%;text-align: center;line-height: 1;}
.alaram_status .btnlabel .label span{white-space: nowrap;}
.alaram_status .btnlabel .btnbox{display: flex;gap: 5px;}
.alaram_status .btnlabel .btnbox > *{white-space: nowrap;}


.details_flex{display: flex;flex-direction: column;width: 100%;max-width: 320px;}

/* Radio switch */
.switch-field input {
	position: absolute !important;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	width: 1px;
	border: 0;
	overflow: hidden;
}

.switch-field label {
	background-color: #e4e4e4;
	color: #131313a3;
	font-size: 14px;
  font-weight:500;
	line-height: 1.5;
	text-align: center;
	padding: 8px 16px;
	margin-right: -1px;
	border: 1px solid rgba(0, 0, 0, 0.2);white-space: nowrap;
}

.switch-field{display: flex;flex-direction: row;flex-wrap: nowrap;}

.switch-field label:hover {
	cursor: pointer;
}

.switch-field input:checked + label {
	background-color: #EB6F24;
  color: #000;
	font-weight:600;
  box-shadow: none;
}

.switch-field label:first-of-type {
	border-radius: 4px 0 0 4px;
}

.switch-field label:last-of-type {
	border-radius: 0 4px 4px 0;
}


@media only screen and (max-width: 1440px) {
  .table-responsive{max-width: 1116px;}
  .dashboard-compact .table-responsive{max-width: 1366px;}

}

@media only screen and (max-width: 1366px) {
  .table-responsive{max-width: 1040px;}
  .dashboard-compact .table-responsive{max-width: 1292px;}
}

@media only screen and (max-width: 1280px) {
  .table-responsive{max-width: 956px;}
  .dashboard-compact .table-responsive{max-width: 1206px;}
}

@media only screen and (max-width: 1199px) {
  .table-responsive{max-width: 875px;}
  .dashboard-compact .table-responsive{max-width: 1125px;}
}

@media only screen and (max-width: 1080px) {
  .table-responsive{max-width: 756px;}
  .dashboard-compact .table-responsive{max-width: 1006px;}
}

@media (min-width: 992px) {
  .dashboard-app {margin-left: 250px;}
  .dashboard-compact .dashboard-app {margin-left: 0;}
  .dashboard-toolbar {left: 250px;}
  .dashboard-compact .dashboard-toolbar {left: 0;}
}

@media (max-width: 992px) {
  .dashboard-nav {display: none;position: fixed;top: 0;right: 0;left: 0;bottom: 0;z-index: 1070;}
  .dashboard-nav.mobile-show {display: block;}
  .dashboard-nav header .menu-toggle {display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;}
  .dashboard-nav header .brand-logo{text-align: right;}
}

@media only screen and (max-width: 991px)  {
  .ht{display: inline-flex;}
  table{border: 0;    background-color: transparent;}
  .tr {display: block; border: 1px solid #484848 !important;margin-bottom: 10px;}
  .tr td{display: flex;align-items: center;justify-content: space-between;width: 100%;margin-bottom: 0px;border: 0;}
  .tr td:not(:last-child){border-bottom: 1px solid #484848;}

  .table-responsive{max-width: 100% !important;}
  /* .table-responsive{max-width: 736px;}
  .dashboard-compact .table-responsive{max-width: 100%;} */
  table .tr.is-offline::after{left: 50%;}
}

@media (max-width: 768px) {
  .dashboard-content {padding: 15px 0px;}
  table .tr.is-offline:after{top: 45%;left: 50%;width: 100%;}
}

@media only screen and (max-width: 767px)  {
  .cm-table{height: calc(200vh - 269px);}

  .dashboard-nav header {min-height: 84px;}
  .dashboard-toolbar {min-height: 68px;}
  .dashboard-app {margin-top: 69px;}

  /* .cm-table .MyTable td .ht{display: none;}
  .cm-table .MyTable{border: 1px solid var(--gray);background-color: #FFFFFF;}
  .cm-table .MyTable .tr {display: block; border: 1px solid #484848 !important;margin-bottom: 10px;}
  .cm-table .MyTable .tr td{display: table-cell;width: auto;margin-bottom: inherit;border: 0;}
  .cm-table .MyTable .tr td:not(:last-child){border-bottom: inherit;} */

  .add_user .head_title h1{text-align: center;}

  .dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > a {display: none;}

  .dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > a:first-child,
  .dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > a:nth-child( 2 ),
  .dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > a:nth-last-child( 2 ),
  .dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > a:last-child,
  .dashboard-content .pagination nav[role="navigation"] div:nth-child(2) span.relative > *{display: flex;}
}

@media screen and (orientation: landscape) and (min-width: 568px) and (max-width: 1024px) {
  .cm-table{height: calc(300vh - 259px);}
}

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

  .add_crane .boxwrap .fbox{flex-wrap: wrap;}
  .add_crane .boxwrap .fbox .fboxsub{width: 100%;margin-bottom: 20px;}
  .add_crane .boxwrap .fbox .fboxsub input{font-size: 12px;}
  .cranedetailsmodal .modal-dialog .modal-body .add_crane .boxwrap .fbox{gap: 10px;}
  .cranedetailsmodal .modal-dialog .modal-body .add_crane .boxwrap .fbox .fboxsub{margin-bottom: 20px;}

  /* krishna */
  /* #crane_body .alaram_status{flex-wrap: wrap;gap: 4px !important;} */

  /* .table-responsive{max-width: 350px;margin: 0 auto;}
  .dashboard-compact .table-responsive{max-width: 100%;} */

  .bootstrap-select .dropdown-toggle .filter-option-inner-inner{overflow: hidden;width: 200px;}
  .details_flex{display: flex;flex-direction: column;width: 100%;max-width: 250px;}

  .alaram_status .divider{display: none;}

  .alaram_status .btnlabel{align-items: flex-start;text-align: left;margin-right: auto;width: 100%;}
  .alaram_status .btnlabel .btnbox{width: 100%;}
  .alaram_status .btnlabel .btnbox .btn, .alaram_status .btnlabel .btn{display: block; width: 100%;}
  .alaram_status .btnlabel .label{text-align: left;}
}