@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{box-sizing: border-box}
:root {
    --maincolor:#FFC107;
    --secundarycolor:#FFA000;
    --accentcolor:#232527;
    --lightgrey:#ccc;
    --white: #fff;
    --black: #000;
}
body{background:#121212;font-family: "Montserrat", sans-serif;font-size:1rem;max-width: 600px;padding:0;margin:0 auto!important;}
.main{padding-bottom:53px;}
.white{color:#efefef}
.black, .switch{color:#212121}
.red{color:#DB4437}
.green{color:#51AB63}
.online{color:#14bb36}
.offline{color:#777}
.gray{color:#666}
.lightgray{color:#999}
hr{border:0;border-bottom:1px solid #666;padding:0;margin:12px auto;}

.chat-status {
    float: left;
    margin-bottom: 26px;
    margin-right: 12px;
}

.minheight{min-height: 96vh;}
.lightblue{color:#528acf}

.iright{text-align: right;}
.icenter{text-align: center;}
.fleft{float:left;}
.fright{float:right;}

.whiteBG{background-color:#efefef}
.blackBG{background-color:#212121}
.redBG{background-color:#DB4437}
.greenBG{background-color:#51AB63}
.grayBG{background-color:#666}
.lightgrayBG{background-color: #999;}

.primary-color{color:var(--maincolor)}
.primary-dark{color:var(--secundarycolor)}
.primary-light{color:#FFECB3}

.accent-colorBG{background-color:var(--accentcolor)}
.primary-colorBG{background-color:var(--maincolor)}
.primary-darkBG{background-color:var(--secundarycolor)}
.primary-lightBG{background-color:#FFECB3}
.accent-colorBG{background-color:var(--accentcolor)}

.isbutton{cursor:pointer}
.main-button, .outline-button{padding:12px;border-width: 2px;border-style: solid;font-weight: 700;display: inline-block;}
.mainy-button{border-width: 2px;border-style: solid;font-weight: 700;display: inline-block;padding:5px 8px;}
.main-button,.mainy-button{background-color:var(--maincolor);color:var(--accentcolor);border-color: #ffbf00}
.main-button:hover{background-color: var(--secundarycolor);border-color: var(--secundarycolor);}

.outline-button{background-color:var(--accentcolor);color:#efefef;border-color:var(--maincolor)}
.outline-button:hover{background:#212121;border-color:var(--secundarycolor);}

.delete{background:#f53649;color:#fff;border:2px solid #f53649}
.delete:hover{background:#a00d1c;border-color:#a00d1c;}
.round{border-radius: 12px;}
.rounded{border-radius: 50px;}

.noview{display: none;}
.w100{width:100%;}
.w50{width:50%}

.spacer{height:68px;display: block;width: 100%;}
.halfspacer{height:35px;display: block;width: 100%;}
.spacer-padding{padding:18px;}
.spacer-roundness{border-radius:12px;}
.spacer-roundness-top{border-radius:12px 12px 0 0;}
.spacer-roundness-bottom{border-radius:0 0 12px 12px;}
.spacer-bottom{margin-bottom:12px;}
.spacer-top{margin-top:12px;}
.reducer-top{margin-top:-12px;}
.mright{margin-right:12px;}
.mleft{margin-left:12px;}

.smaller{font-size:0.68rem}
.small{font-size:0.875rem}
.big{font-size:1.125rem}
.bigger{font-size:1.5rem}
.title{font-size:2rem}
.displayL{font-size:3rem}
.displayXL{font-size:4rem}

.bold,.strong{font-weight: 600;}
.bolder,.stronger{font-weight: 900;}

.nav-bar-trigger {background: #ccc;width: 53px;top: 21px;position: fixed;margin-left: 15px;border: 2px solid #121212;padding: 12px 18px;font-size: 1.25rem;border-radius: 50px;color: #333;z-index: 1000;}

.map-zone{height:60vh}
.map-zone-extended{height:95vh;}
.map-options{margin-top: -100px;position: absolute;padding: 0 12px;}
.map-options button{padding:8px;width:45px;font-size:1.5rem;color:#efefef;background:#121212;border-radius:8px;border:none;}

.notification-box {padding: 18px;border-radius: 12px;position: fixed;top: -150vh;width: 90%;max-width: 400px;transform: translateX(-50%);background: var(--accentcolor);left: 50%;box-shadow: 0 3px 5px #0006;z-index:10;touch-action: none;}
.notification-close{display: inline;float: right;margin-top: -11px;margin-right: -9px;font-size: 1.35rem;color: #efefef;}
.notification-title{font-size: 1.5rem;font-weight: 600;}
.notification-title i{width:26px;text-align: center;}
.notification-options{margin-top:12px}
.notification-options button{border-radius:50px;}
.notification-body{color: #ccc;}
.notification-checkbox{color:#fff;}
.notification-checkbox input{background: #fff;appearance: none;width: 20px;height: 20px;vertical-align: middle;border-radius: 4px;margin-right: 12px;}
.notification-checkbox input:checked{background: var(--maincolor);}
.notification-checkbox input:checked:after {content: "\f00c";font-weight: 700;font-family: "Font Awesome 6 Free";margin: 3px 4px;display: inline-block;}

.alert-box {padding: 18px;border-radius: 12px;width: 100%;background: var(--maincolor);left: 50%;margin:auto}
.alert-close{display: inline;float: right;margin-top: -11px;margin-right: -9px;font-size: 1.35rem;color: #efefef;}
.alert-title{font-size: 1.5rem;font-weight: 600;}
.alert-title i{width:26px;text-align: center;}
.alert-options{margin-top:12px}
.alert-options button{border-radius:50px;}
.alert-body{color: var(--accentcolor);}

.themeSelector{border-radius: 12px;border:1px solid #aaa;padding:26px 0;text-align: center;font-size:12px;width:29%;display: inline-block;background-size:cover;background-position:center;margin:5px}
.themeSelector i{display:block;font-size:2.5rem;color:#04cc2c}
.themeSelector:not(.active) i{color:transparent}


.loader {width: 16px;aspect-ratio: 1;background: var(--maincolor);box-shadow: 0 -16px var(--secundarycolor);animation: l6 2s infinite;}
@keyframes l6 {0%   {transform: translate(0   ,0    ) rotate(0)}25%  {transform: translate(0   ,0    ) rotate(90deg)}50%  {transform: translate(100%,-100%) rotate(180deg)}75%  {transform: translate(100%,-100%) rotate(270deg)}100% {transform: translate(0   ,0    ) rotate(360deg)}}

a{text-decoration: none; color:inherit}
.loader{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100  }

.asider{background:#fff;color:#333;position: fixed;left: -100vw;top: 0;padding: 21px;width: 100%;max-width: calc((100% - 600px) / 2.3);min-width: 360px;padding-top: 68px;height: 100vh;overflow: auto;font-size: 1.2rem;z-index:999}
.asider a{color:#333;}
.aside-menu{list-style: none;padding:0;}
.aside-menu a{text-decoration: none;}
.aside-menu li{padding:12px 0}
.aside-menu li .fa-solid{width:35px;text-align: center;}

.bottomMenu {display: flex;font-size: 1.25rem;width: 100%;justify-content: space-around;padding: 12px;position: fixed;max-width: 600px;bottom: 0;background: var(--accentcolor);}
.bottomMenu a{color: var(--maincolor);}

.optionButton a{color:var(--accentcolor);text-decoration: none;;}
.optionButton{display:flex;border-bottom:1px solid var(--accentcolor);padding:12px 0    }
.optionButton .icon-holder,.optionButton .arrow-holder{width:80px;display: flex;align-items: top;justify-content: center;font-size:1.5rem;}
.optionButton .button-detail{width:calc(100% - 160px)}
.optionButton .button-detail p{margin:0;padding:0;margin-top:5px;}

.loginform, .registerform, .restorePassword{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:var(--maincolor);width:90%;padding:53px 12px;border-radius:8px;max-width:350px;}

.loginform input{padding:12px;}

/**INPUTS**/
textarea
,input[type="text"]
,input[type="number"]
,input[type="email"]
,input[type="password"]
,input[type="date"]
,input[type="url"]
,input[type="search"]
,input[type="datetime-local"]
,select{padding:12px;border:1px solid #ddd;font-family: "Montserrat";border-radius:3px;}

input[type="range"] {-webkit-appearance: none;appearance: none; width: 100%;height: 10px;margin: 5px 0;}
input[type="range"]::-webkit-slider-runnable-track {width: 100%;height: 7px;cursor: pointer;background: var(--lightgrey);border-radius: 50px;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;appearance: none;width: 21px;height: 21px;cursor: pointer;background: var(--accentcolor);border-radius: 50%;border: 2px solid var(--white);box-shadow: 0 2px 4px var(--lightgrey);margin-top:-7px}
input[type="range"]:active::-webkit-slider-thumb {background:  var(--accentcolor);}
input[type="range"]::-moz-range-thumb {width: 15px;height: 15px;background:  var(--accentcolor);border-radius: 50%;border: 2px solid var(--white);box-shadow: 0 2px 4px var(--lightgrey);}
input[type="range"]::-moz-range-progress {background-color:  var(--accentcolor);}
input[type="range"]::-ms-thumb {width: 15px;height: 15px;background:  var(--accentcolor);border-radius: 50%;border: 2px solid var(--white);box-shadow: 0 2px 4px var(--lightgrey);}
input[type="range"]::-ms-fill-lower {background-color:  var(--accentcolor);}
input[type="range"]::-ms-fill-upper {background-color: var(--lightgrey)}

.range{border:none;display: flex;width:100%}
.range input[type="range"]{width:68%;margin-top:15px}
.range input[type="number"]{width:28%;margin-left:2%}

.switch{font-size:35px;margin:4px;padding:2px;display: inline-block;vertical-align: middle;color:transparent;-webkit-background-clip: text;-moz-background-clip: text;background-clip: text;transition:512ms}
.switch.fa-toggle-on.fa-flip-horizontal{background-color:#ccc;}
.switch.fa-toggle-on{background-color:var(--maincolor)}

.select-box {border: 1px solid #ddd;background: #fff;padding: 12px;border-radius: 3px;}
.select-box::after{content:"\f078";font-weight:700;font-family: "Font Awesome 6 Free";float: right;margin-top: -17px;}
.select-box > *:not(.active){display:none;}

.select-box.picking{position:fixed;top:50%;left:50%;width:90%;max-width:450px;transform:translate(-50%,-50%);box-shadow: 0 0 5px 100vh rgba(0,0,0,0.3);max-height:60vh;overflow:auto;background:var(--white);color:#333}
.select-box.picking::after{content:"";}
.select-box.picking > * {display:block;padding:12px;transition:256ms}
.select-box.picking > *:hover {background:rgba(0,0,0,0.3)}
.select-box .disabled{user-select: none;pointer-events: none;}
details > summary {list-style: none;  }
details summary::-webkit-details-marker{display: none;}
details[open] {padding-bottom: 35px;}
details[open] summary {margin-bottom: 21px;border-bottom: 2px solid rgba(0, 0, 0, 0.1);}
summary {padding: 12px 5px;font-size: 1.2em;font-weight: 700;cursor: pointer;margin: auto -12px;margin-bottom: -11px;transition: 1s ease;user-select: none;}
summary::after {content: "\f078";font-family: "Font Awesome 6 Free";float: right;margin: 0 12px;font-weight: 900;-webkit-font-smoothing: antialiased;font-weight: 900;font-style: normal;font-variant: normal;text-rendering: auto;line-height: 1;}
details[open] summary::after {content: "\f077";}
details[open] summary ~ * {animation: sweepin 0.5s ease-in-out;}

.referal::before{content:"\f08e";font-weight:700;font-family: "Font Awesome 6 Free";margin:0 6px 0 3px;display: inline-block;}
.switch-container{display: flex;margin-bottom:21px;}

.image-btn {display: inline-flex;align-items: center;justify-content: center;width: 100%;height: 200px;border: 2px dashed #0077cc;border-radius: 12px;cursor: pointer;background-size: cover;background-position: center;background-color: #f4f4f4;color: #0077cc;font-size: 2rem;font-weight: bold;transition: all 0.3s;}

.image-btn:hover {background-color: #e6f0ff;}

input[type="file"] {display: none;}

.password-view {float: right;position: absolute;margin-top: 16px;margin-left: -34px;cursor:pointer;}

.card{border-radius:12px;background: linear-gradient(135deg,#2b8cff,#6a4cff);color:#fff;padding:21px;max-width:300px;width:90%;margin:auto;}
.card .card-icon{font-size:2.25rem}

.countResults{background: #333;color: #fff;padding: 3px 10px;display: inline-block;border-radius: 50px;}

.notification-list{border-bottom:1px solid #0001;padding:26px 12px;display: flex;}
.notification-icon{width:50px;font-size:2em;color:var(--maincolor);}
.notification-detail small{display: block;float:right;}
.notification-button{display:block;width:fit-content;padding:5px 12px;border-radius: 50px;font-size:13px;font-weight: 600;margin: 12px 0;}
.notification-detail{width:calc(100% - 55px);}

.waiting {background: #ccc;color: #333;padding: 12px;border-radius: 8px;text-align: center;font-size: 14px;font-weight: 500;}

.spinning{animation: rotating 2s linear infinite;}
@-webkit-keyframes rotating /* Safari and Chrome */ {from {-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}to {-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}}
@keyframes rotating {from {-ms-transform: rotate(0deg);-moz-transform: rotate(0deg);-webkit-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);}to {-ms-transform: rotate(360deg);-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}}

.requests{display: flex; padding: 26px 12px; border-bottom: 1px solid #0001;align-items: center;}
.requests strong{width:45%;}
.requests small{width:30%;}
.requests .request-status{font-size:10px; padding:5px 8px; border-radius: 50px;width:20%;text-align: center;}
.requests .fa-chevron-right{width:10%;text-align:right;font-size:2em;float:right}
.created,.pending{background: #F4B400; color: #000;}
.assigned{background: #34A853;color: #fff;}
.payed,.in_progress,.picked,.arrived,.delayed, .picking{background: #4285F4;color: #fff;}
.completed,.dropped{background: #1B5E20;color: #fff;}
.cancelled{background: #D93025;color: #fff;}
.rejected{background: #C5221F;color: #fff;}
.timeout{background: #ccc;color: #333;}

.tabs{display: flex;border-bottom:1px solid #0001;margin: 21px auto 12px;}
.tab{padding:8px;border-top:4px solid transparent}
.tab.active{border-top-color:var(--maincolor);font-weight: 700;}


/*-CHAT-*/
#chat-box{border:1px solid #ccc;padding:12px;border-radius: 8px;padding-top:53px;}
.chat-warning{background: #ccc;color: #666; font-size: 14px;padding:8px; border-radius: 5px;margin-bottom:21px;}
.chat-container {width: 100%;height: 92vh;background: #fff;margin: auto;display: flex;flex-direction: column;border-radius: 8px;overflow: hidden;}
.chat-body {flex: 1;padding: 10px;overflow-y: auto;}
.msg {max-width: 70%;padding: 8px 12px;margin: 5px 0;border-radius: 7px;font-size: 14px;margin-bottom:12px}
.me {background: #121212;color:#DDD;margin-left: auto;}
.other {background: #ddd;color: #121212;margin-right: auto;}
.chat-footer {display: flex;padding: 10px;background: #f0f0f0;}
.chat-footer input {flex: 1;padding: 10px;border-radius: 20px;border: none;}
.chat-footer button {background: #075e54;color: #fff;border: none;margin-left: 10px;border-radius: 50%;width: 40px;cursor: pointer;}
.msg-info {font-size: 11px;color: #666;text-align: right;margin-top: 3px;}

.checks {margin-left: 5px;}