/*
 * Ogma UI framework
 * Version - 0.0.1
 *
 * Copyright (c) Ogma Applications / Design Team
 *
 */


/* user agent reset */
@font-face { font-family: Roboto; src: url(../font/Roboto-Regular.ttf); }

:root {
     --background: #fff;
     --border-color: #e4e4e4;
     --highlight: #f2f2f2;
     --light: #fafafa; 
     --s_space:15px
}

* { padding: 0; margin: 0; box-sizing: border-box; outline: none; border: none; -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ -webkit-tap-highlight-color: rgba(0,0,0,0); /* prevent tap highlight color / shadow */ /* prevent copy paste, to allow, change 'none' to 'text' */ }
* { /* box-shadow:0 0 0 1px red!important;*/ }
* { box-sizing: border-box; margin: 0; padding: 0 }
li { list-style: none; }
a { color: inherit; /*text-decoration:none;*/ }
/* ----- */


html { -webkit-tap-highlight-color: rgba(0,0,0,0); color: rgb(0,0,0) !important; }
html, body { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; box-sizing: border-box; position: relative; cursor: default; -webkit-overflow-scrolling: none; background: var(--background) }

body { overflow: hidden; display: flex; font-size: var(--text); }



/* layout */

application { height: 100%; width: 100%; position: relative; box-sizing: border-box; min-width: 320px; display: flex; flex-direction: column; padding: 30px; }
wrapper { font-family: Roboto; font-size: var(--text); height: 100%; position: relative; overflow: hidden; margin: 0 auto; transform: scale(1); display: flex; flex-direction: column; width: 100%; box-shadow: 0 0 0 1px var(--border-color); }

/* ----- */

/* toolbar */


toolbar { min-height: var(--area); width: 100%; position: relative; background: var(--background); display: flex; align-items: center; flex-shrink: 0; box-sizing: border-box; user-select: none; display: flex; /* padding: 0 10px; */ z-index: 99 }


toolbar[border="no"]{box-shadow:none}
toolbar[border="bottom"]{box-shadow: 0 1px 0 0 var(--border-color);}

toolbar[accent] { background: var(--main-color); color: #fff; box-shadow: none; padding: 0 10px }
toolbar[light] { background: var(--light) }
toolbar[highlight] { background: var(--highlight) }
toolbar[shadow] { box-shadow: var(--elevation); }

toolbar[transparent] { box-shadow: none; background: none; }
toolbar[compact] { min-height: 0; flex-shrink: 0; }


toolbar[right] { justify-content: flex-end }
toolbar[scroll] { padding: 0 }
toolbar[lightgrey] { background-color: #F2F2F2 }
toolbar[lightgrey].subtoolbar { height: 40px; min-height: 40px; }
toolbar[lightgrey].withFilter { height: auto; padding-top: 8px; padding-bottom: 4px;}
.filter_container__select { display: flex!important; margin: 0 0 0 8px!important }
.filter_title { margin-right: 12px; margin-top: 1px;}

toolbar > wrap { display: flex; position: relative; align-items: center; padding: 0 15px; flex-shrink: 0; width: 100%; }

toolbar nav[launcher] { flex: 1; display: flex; overflow: hidden; position: relative; align-items: center; height: 26px; }
toolbar nav[launcher] ul { display: flex; max-width: 100%; padding: 0 10px; }
toolbar nav[launcher] ul li a { display: flex; height: 26px; padding: 0px 10px; align-items: center; text-decoration: none; overflow: hidden; width: 100%; }
toolbar nav[launcher] ul li a { }
/* toolbar nav[launcher] ul li{display:flex;cursor:pointer;border-radius:30px;white-space: nowrap;position: relative;max-width: 100%; overflow:hidden;font-weight:600;} */
/* Will be review */
toolbar nav[launcher] ul li { display: flex; cursor: pointer; border-radius: 12px; white-space: nowrap; position: relative; max-width: 100%; font-weight: 700; }
toolbar nav[launcher] ul li.selected { color: #fff; background: var(--main-color); cursor: default; margin: 0 5px; }

toolbar nav[launcher] ul li:hover { background-image: var(--over-color); }
toolbar nav[launcher] ul li:active { background-image: var(--press-color) }
toolbar nav[launcher] ul li.separator { box-shadow: inset 1px 0 0 0px; opacity: .15; height: 30px; min-width: 1px; width: 1px; margin: 0 10px; position: relative; z-index: 2; }
toolbar nav[launcher] ul li:active text { transform: translateY(1px); }

toolbar nav[launcher] ul li text { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 16px; font-size: 14px}


toolbar.main_header[invert] { background: var(--main-color-1); color: #fff; }
toolbar.main_header[invert] nav[launcher] ul li.selected { color:var(--main-color-1); background:#fff;}
toolbar.main_header[invert] logo{color:#fff;}

/* @media (max-width: 800px)
 {
toolbar nav[launcher] ul li{display:none}
toolbar nav[launcher] ul li.selected{display:flex;}
} */
/* ----- */



container {display: flex;width: 100%;height: 100%;position: relative;overflow: hidden;}
container[h_space]{ padding: var(--s_space) var(--fab);}
container[s_space]{ padding: var(--s_space);}
container[horizontal] {flex-direction: column;}
[ratio] container {flex-grow: 1; flex-shrink: 0;}

[ratio="1:1"] container {flex: 1;}
/*[ratio="1:1"] container:last-child{flex: 1;}*/

[ratio="3:2"] container:first-child {flex: 3;}
[ratio="3:2"] container:last-child {flex: 2;}



view { display: flex; width: 100%; height: 100%; position: relative; overflow: hidden; box-shadow: 0 0 0 1px var(--outline); flex-direction: column; z-index: 1; background: var(--background); }
view[main] { background-image: url("bg.png"); padding-bottom: 20px; justify-content: space-between; flex-direction: inherit; box-shadow: none; }
@media (max-width: 869px) {
    view[main] { background-size: cover; }
}
@media (min-width: 870px) {
    view[main] { background-repeat: round; }
}
@media (max-width: 1180px) {
    view[main] { display: flex; flex-direction: column; align-items: center; height: auto;}
}
@media (max-width: 990px) {
    view[main] { padding-bottom: 50px;}
}


.customer-page__title {
    font-size: 62px;
    font-weight: 700;
    margin: 110px 0 0 100px!important;
    line-height: 1.2;
    color: #ffffff;
    max-width: 540px!important;
}

@media (max-width: 1180px) {
    .customer-page__title {
        font-size: 40px;
        font-weight: 700;
        margin: 24px 0 0 0!important;
        line-height: 1.2;
        color: #ffffff;
        max-width: 540px!important;
    }
}

.customer-page__btn {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 19.2px;
    margin: 120px 0 0 100px;
    border: 1px solid #ffffff;
    border-radius: 8px;
    width: max-content;
    padding: 8px 16px;
    cursor: pointer;
}

.customer-page__btn > a {
    color: #ffffff;
}

.customer-page__btn > a:hover {
    color: #D3D3D3;
}

@media (max-width: 1180px) {
    .customer-page__btn {
        margin: 26px -100px 0 0;
        float: right;
    }
}

.statistics {
    font-size: 48px;
    font-weight: 700;
    color: #204D49;
    line-height: 57.6px;
    margin: 108px 0 40px 100px;
}

.statistics-info__container {
    display: flex;
    margin: 0 100px;
}

.statistics-info {
    width: -webkit-fill-available;
    min-height: 124px;
    background-color: #F3F3F3;
    margin: 0 10px 28px 10px;
    border-radius: 16px;
    cursor: pointer;
}

.statistics-info:first-child {
    margin: 0 10px 28px 0;
}

.statistics-info:hover {
    background-color: #29CABA;
}

.statistics-info:hover > p {
    color: #ffffff;
}

.statistics-info__data {
    font-size: 34px;
    font-weight: 500;
    line-height: 40px;
    color: #3C8680;
    margin: 28px 25.5px 0;
}

.statictics__title {
    font-size: 20px;
    font-weight: 500;
    line-height: 24px;
    color: #3C8680CC;
    margin: 4px 25.5px;
}

.customer-landing__img {
    background-image: url("https://static.wixstatic.com/media/56af8d_b2957ca093ff41d5a9860d41a250ffea~mv2.jpg/v1/fill/w_2401,h_934,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/COLORFUL%20LARGE%20TRAILER%20TRUCKS.jpg");
    background-size: cover;
    height: 60%;
    width: 70%;
    margin: auto;
}

.contactUs__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ffffff;
    margin: 34px auto 183px;
    padding-bottom: 38px;
    border-radius: 10px;
    background-color: #29CABA;
    width: 70%;
    position: relative;
}

.contactUs__title {
    font-size: 48px;
    font-weight: 700;
    line-height: 57.6px;
    margin: 30px;
}

.contactUs__data {
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
    margin-bottom: 10px;
}

.contactUs__address {
    font-size: 16px;
    font-weight: 500;
    line-height: 19.2px;
}

.dots_0 {
    background-image: url("dots.png");
    position: absolute;
    height: 116px;
    width: 116px;
    left: 150px;
    bottom: -24px;
    z-index: 1;
}

@media (max-width: 1180px) {
    .dots_0 {
        display: none;
    }
}

.dots_1 {
    background-image: url("dots.png");
    position: absolute;
    height: 106px;
    width: 116px;
    left: 30px;
    top: -34px;
}

.dots_2 {
    background-image: url("dots.png");
    position: absolute;
    height: 116px;
    width: 116px;
    right: -30px;
    bottom: -42px;
}

.chat {
    background-image: url("vector.png");
    height: 20px;
    width: 20px;
}

.sort_icon {
    background-image: url("sort.png");
    background-color: #F3F3F3;
    height: 24px;
    width: 20px;
    margin: 3px 0 0 2px;
    border-radius: 6px 0 0 6px;
}

.filter_call {
    margin: 8px -4px 0 8px;
}

.chatContainer {
    position: absolute;
    right: 30px;
    bottom: 20px;
    background-color: #89E2D9;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

view[auto] { width: auto;}
view[small] { width: 500px; flex-shrink: 0; }

view[auto_height] { height: auto; }
view[auto_height][small] { min-height: 350px; width: 100%; flex-shrink: 1; }


view[transparent] { box-shadow: none; }

view[vertical] { flex-direction: row; }
view[horizontal] { flex-direction: column; }
view[accent] { background: var(--main-color); color: #fff; }
view[space] { padding: var(--fab); }
view[light] { background: var(--light); }
view[highlight] { background: var(--highlight);}

view > form { display: flex; overflow: hidden; flex-direction: column; width: 100%; height: 100%; }
view[player] media { }
view[scroll] { overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch; padding-bottom: 150px; }
view[empty] { box-shadow: none; background: none; }


/****/

view[intro] { overflow: auto; overflow: overlay; -webkit-overflow-scrolling: touch; }
view[intro] > wrap { align-items: center; margin: auto; display: flex; flex-direction: column; flex-shrink: 0 }
view[intro] panel { display: flex; margin: 30px 0; }


/**/


view[single] player { min-height: 360px; min-width: 640px; }
view[hide] { display: none }


@media (max-width: 800px) {
    view[single] player { min-width: 100vw; min-height: 56.25vw }
}

/**/

view[player] { align-items: center; justify-content: center; }
view[player] player { /*max-width:100%; max-height:100%;*/ height: 100%; width: 100%; }







/**/

info { display: flex; flex-direction: column; position: relative; flex-shrink: 0 }



view[single] info[bar] { max-width: 640px; }


[intro] info { /*margin:10px;*/ align-items: center; }
[intro] info text { text-align: center; opacity: .5; }

info text { overflow: hidden; text-overflow: ellipsis; flex-shrink: 0 }

info text[title] { opacity: 1; margin-bottom: 15px; }
info text[subtitle] { opacity: 1; margin-bottom: 5px; }
info text[accent] { color: var(--main-color); opacity: 1; }


[intro] info separator { width: 100%; margin-top: 40px; }


[player] info[bar]:hover,
player[hover][desktop] + info[bar],
player[state="pause"][desktop] + info[bar] { transform: translateY(0px); transition-delay: 0s; opacity: 1; }



[player] info[bar] { position: absolute; color: #fff; top: 0; left: 0; background: linear-gradient(to bottom, rgb(25, 25, 25) 0%,rgba(0,0,0,0) 100%); width: 100%; transition-delay: .225s; transition-duration: .175s; transform: translateY(-100%); opacity: 0; }


info[bar] { padding: 30px; }
info[bar] text { margin-bottom: 5px; }
info[bar] text:last-child { margin: 0 }


/*view[resize]{flex-shrink: 0;resize: horizontal; width:50%; min-width:300px; max-width:calc(100% - 300px);padding-bottom:10px}*/ /* experiment */


/* switch*/

gap{width:0; height:0; flex-shrink:0; transition:.225s; display:none}

switchable{display:flex;flex-direction:column; width:100%; height:100%; bottom:0; position:relative; overflow:hidden; box-shadow:0 0 0 1px #e4e4e4; box-shadow:0 0 0 1px var(--border-color);z-index:2;  transition: .125s; transition-property: width, height; }
switchable[compact]{width:60%; }
switchable[mini]{width:340px; max-width:100%;  flex-shrink:0}

switchable[micro]{width:300px; max-width:100%;  flex-shrink:0}

switchable[middle]{width:400px; max-width:100%;  flex-shrink:0}
switchable[large]{width:800px; max-width:100%;  flex-shrink:0}
switchable.hide{width:60px;width:var(--area); flex-shrink:0; flex-direction:row;}

switchable switch{width:100%;height:60px;height:var(--area);display: flex;cursor:pointer;overflow:hidden;position:relative;flex-shrink:0;background:#fff;background:var(--background);z-index:2;/*box-shadow:0 0 0 1px #e4e4e4;box-shadow:0 0 0 1px var(--border-color);*/box-shadow:inset 0 -1px 0 0px var(--border-color);padding:0 15px;}

switchable.hide switch{width:60px;width:var(--area);height:100%;flex-direction: column;align-items: center;padding:15px 0 }

switchable switch:active wrap{transform:translateY(1px)}
switchable switch[accent]{background:var(--main-color);color:#fff;}

switchable switch wrap{height:100%;cursor:pointer; width:100%; position:relative;}
switchable switch:hover{background-image: linear-gradient(to top, rgba(0,0,0,.05) 0%,rgba(0,0,0,.05) 100%);background-image: var(--over-color);}


switchable switch text { font-weight: 700; pointer-events: none; white-space: nowrap; text-overflow: ellipsis; display: flex; height: 60px; height: var(--area); align-items: center; padding: 0 10px; overflow: hidden; position: absolute; transform-origin: 0 0; }

switchable.hide switch text{transform: rotate(-90deg) translateX(-100%);    padding: 0 20px;}


.k-ie11 switchable.hide switch text{ width:400px; justify-content:flex-end}
.k-ie11 switchable.hide switch tip,switchable.hide switch tip span {order:0;}

switchable switch tip{ font-weight:400;  opacity:.0; transition-delay:.5s; transition-duration:.2s; transition-property:opacity; position:relative; display:flex;}
switchable switch tip,switchable switch tip span{order:2}
switchable.hide switch tip,switchable.hide switch tip span{order:initial}
switchable switch:hover tip{ opacity:.5; transition-delay:.125s;}
switchable switch tip b{padding:0 10px;}
switchable switch icon{margin:auto}

switchable[horizontal]{flex-direction:column}
switchable[horizontal].hide {height:var(--area); width:100%; flex-shrink:0}
switchable[horizontal] switch{height:var(--area); width:100%;}
switchable[horizontal] switch text{transform:rotate(0deg);}
switchable[right]{right:0}

switchable.hide.drop{ width:360px;}



switchable[full]{position:absolute;}
switchable[full] + gap{display:flex;width:60px; height:60px;}




@media(max-width:800px){

gap{display:flex;width:var(--area); height:var(--area);}

switchable[overlay]{/*position:absolute;z-index:10*/}
switchable[compact]{width:100%}

view[adaptive],
switchable[adaptive]{flex-direction:column;}

switchable[adaptive] > switch{height:var(--area); width:100%; flex-direction:row;     padding: 0 15px;}

switchable[adaptive] > switch text{transform:rotate(0deg);}
switchable[adaptive] > switch text tip,
switchable[adaptive] > switch text tip span {order:2}

switchable[adaptive].hide{height:var(--area); width:100%; flex-shrink:0}
switchable[adaptive].hide.drop{ height:50% }
switchable[adaptive].hide.drop.enter{ height:100% }

switchable[adaptive].drag{ height:var(--area) }

spliter[adaptive]{width:100%; height:10px;}
}

.date-time__container {
    display: inline-flex;
}

.date__part {
    margin-right: 8px;
    padding-right: 8px;
    border-right: 1px solid #EEEEE1;
    min-width: 50px;
}

.time__part {
    margin-left: 2px;
}

.comment_modal__container .ant-table-wrapper {
    width: 100%;
};

.comment-modal__table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

.comment-modal__table .comment-modal__th {
    border: 1px solid #dddddd;
    background-color: #f0f0f0;
    text-align: left;
    padding: 4px;
    text-align: center;
}

.comment-modal__table .comment-modal__td {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 4px;
    text-align: center!important;
}

.comment-modal__table .comment-modal__td:nth-child(1) {
    min-width: 100px;
}

.comment-modal__table .comment-modal__td:nth-child(2) {
    min-width: 120px;
}

.comment-modal__table .comment-modal__td:nth-child(3) {
    text-align: left;
}