/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 8, 2017, 8:40:11 AM
    Author     : macrom
*/

html {
    /*background: url('../images/bg.jpg') no-repeat center center fixed;*/            
    background-size: cover; 
}

html, body {
    /*font-size: 12px;*/
    font-family: sans;    
    margin: 0;
    padding: 0;
    min-width: 450px;
}

.logo {
    /*border: #004d6f 1px solid;*/
    padding: 40px;
    font-size: 128px;
    border-radius: 50%;
    /*box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, .5);*/
    color: #5983a4;
    margin-bottom: 30px;
    background: linear-gradient(to bottom right, white, #5983a4);    
}

.rowZakazOk {
    background-color: #ccffcc;
}

.rowBlue {
    background-color: #99ccff;
}

.rowZakazBad {
    background-color: #ffcccc;
}

.colZakazBad {
    background-color: #ff3b3b;
}

.hdr {
    
    font-size: 24px;
    text-align: center;
}

.col {
    vertical-align: top;    
    width: 100%;
}

.col1 {
    vertical-align: top;    
    width: 500px;
    
}

.usr {
    position: absolute;
    right: 20px;    
    top: 15px;
}

.exit {
    position: absolute;
    right: 20px;        
    top: 32px;
}

.back {
    position: absolute;
    right: 80px;        
    top: 28px;
}

.bldn {
    font-weight: bold;    
    font-size: 18px;
}

.bldn_14 {
    font-weight: bold;    
    font-size: 14px;
    color: #660033;
}

.bldn_14_r {
    font-weight: bold;    
    font-size: 14px;
    color: brown;
}

.bldn_r {
    font-weight: bold !important;    
    font-size: 18px !important;
    color: orangered !important;
}

.bldn_g {
    font-weight: bold !important;    
    font-size: 18px !important;
    color: #489648 !important;
}

.bldn_g_14 {
    font-weight: bold !important;    
    font-size: 14px !important;
    color: #489648 !important;
}

.bldn_b {
    font-weight: bold !important;    
    font-size: 16px !important;
    color: #3f6fed !important;
}

.srok {    
    font-weight: bold;    
    font-size: 14px;
    color: orange;
}

.fmOrder {
    background-color: #489648;
}

.changed {
    background-color: #ffcc66;
}

.jsonApi {
    background-color: #ffff99;
}

#zakaz .ui-state-hover{
    /*background: #EEE !important;
    color: #000 !important;*/
}

#zakaz .ui-state-highlight {
    border: 1px solid #CCC !important;
    background: #C3DFFF !important;
    /*color: #FFF !important;*/
}

.footerMain {
    background: #424548 !important;
    border: #424548 !important;
    text-align: left;    
}

.footerMain .ui-widget-content {
    color: #FFF !important;
}

.jsonPortal {
    background-color: #ff9900;    
}

.koef {
    color: #484896;
    font-size: 12px;
    font-weight: bold;
}

.hdr24 {
    font-size: 46px; 
    color: #4fbc47;
}

.icon {
    font-size: 1.5em !important;
    /*text-shadow: 2px 2px 4px #999;*/
    color: #FFF;
    margin: 10px;
    font-weight: bold;
}

.lnk {    
    color: #004d6f;
}

.ui-menuitem-icon {
    margin-right: 5px;
    margin-top: 2px;
    font-size: 14px;
}

.ui-button-icon-left {
    font-size: 14px;
}

.objs {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.obj {
    text-align: center;
    flex: 1 1 100px;
    border: dashed 1px #999;
    margin: 20px;
    padding: 10px;
    border-radius: 10px;
    background: rgb(236,236,236);
    /*background: linear-gradient(180deg, rgba(236,236,236,1) 0%, rgba(2,0,36,0.5914740896358543) 0%, rgba(187,187,187,1) 100%);*/
}

.obj a {
    font-size: 18px !important;
}

.obj-icon {
    color: #484896;
    font-size: 48px;
}

.obj-main {
    font-size: 14px;    
}

.obj-name {
    font-size: 20px;
    color: #004d6f;
}

.obj-name-2 {
    font-size: 16px;
    color: #004d6f;
}

.obj-prim {
    font-size: 14px;
    font-style: italic;
    color: #424548;
}

.object-frame {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
}

.frame-elements {
    flex: 3 1;
    order:2;
}

.frame-properties {
    order: 1;
    flex: 1 1 400px;
}

.hidden {
    display: none;    
}

.path {
    margin-top: 10px;
    font-size: 12px;
}

.btnAdd {    
}

.btnAdd > .ui-widget-content {
    background: #489648;
}

.tblProps th {
    background: #999 !important;
    border: none !important; 
}

.ui-accordion-header {
    font-size: 12px;    
}

.ui-fileupload-buttonbar {
    padding: 0px !important;
}

/*
#btnUpload span[id^='label'], span[id*='_label']{
    display: inline !important;    
}
*/
#btnUpload span[class*='ui-fileupload-choose'] {
    padding: 5px !important;    
}

.to_types_count {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.to_type {
    margin: 20px;
}

.to_types_value {
    text-align: center;
}

.to_types_value i {
    font-size: 18px;    
}

.caption {
    font-size: 24px !important;
    color: #006699 !important;
}

.to_type_fact {
    font-size: 24px;
    color: #489648;
}

.to_type_plan {
    font-size: 18px;
    color: #ff3b3b;
}

.work-region {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;    
    width: 100%;    
    justify-content: space-between;    
}

.left-menu {
    flex-grow: 1;    
    padding: 5px;
    max-width: 400px;
    min-width: 300px;
}

.guide {    
    flex-grow: 99;
    padding: 5px;
    min-width: 400px;
}


#res {
    
}

#res_smena {
    margin-top: 20px;
}

#res_order {
    margin-top: 20px;
}

.macrom_table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 10px;
}

.macrom_table td {
    padding: 10px;    
}

.tbl_smena_480 {
    display: none;
}

@media (max-width: 950px) {
    .tbl_smena {
        display: none;
    }
    
    .tbl_smena_480 {
        display: block;
    }
    
    .left-menu {
        width: 100%;
        max-width: 100%;
    }
}

.order {
    border: 1px solid #CCC;    
    margin-top: 0px;
    padding: 5px;
    border-radius: 5px;
    min-width: 300px;
    position: relative;
    margin-right: 0px;    
}

.order .dt {
    font-size: 0.9em;
    text-align: right;
    color: #aaa;
}

.order .client {
    margin-left: 20px;
}

.order .ico {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.order .bage {
    position: absolute;
    left: -5px;
    top: -5px;
    border-radius: 50%;
    background-color: #ff0066;
    width: 20px;    
    text-align: center;
    font-size: 8px;
    color: #FFF;
    font-weight: bold;
    height: 20px;
    line-height: 20px;    
}

.sel {
    background-color: #99ccff;
}

.sel .dt {
    color: #555;
}

.chat {
    padding: 10px;
    border: 1px solid #999;
    max-width: 600px;
    border-radius: 10px;
    margin-top: 10px;
    margin-left: 20px;
}

.chat .dt {
    font-size: 0.9em;
    text-align: right;
    color: #aaa;
}

.chat-in {
    background-color: #ffffcc;
}

.chat-out {
    background-color: #ccffcc;
    margin-left: 50px;
}

.msg-hdr {
    font-weight: bold;
    font-size: 1.1em;
    color: #000;
}

.ico-in {
    color: #489648;
}

.ico-out {
    color: #3f6fed;
}

.orders-scroll {
    border: none !important;    
    /*min-height: 400px;*/
}

.messages-scroll {
    border: none !important;    
}

.ui-toggleswitch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 28px;
  }

  .ui-toggleswitch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }

  .ui-toggleswitch-slider:before {
    position: absolute;
    content: "";
    height: 23px;
    width: 26px;
    left: 4px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  button.ui-button {
    margin-right: .5rem;
  }
  
  .big_ico {
      font-size: 3em !important;
      color: #ff0000;
  }
  
  /* Обычное сообщение*/
  .msg1 {
      
  }
  
  /* Заявка - На свой транспорт*/
  .msg2 {
      
  }
  
  /* Заявка - На перевозчика*/
  .msg3 {
      
  }
  
  /* Заявка - Исполнена*/
  .msg7 {
      
  }
  
  /* Заявка - Отклонена*/
  .msg7 {
      
  }
  
  
  
  /* Обычное сообщение*/
  .icoColor1 {
      color: #ffe082;
  }
  
  /* Заявка - На свой транспорт*/
  .icoColor2 {
      color: #ffe082;
  }
  
  /* Заявка - На перевозчика*/
  .icoColor3 {
      color: #ffe082;
  }
  
  /* Заявка - Исполнена*/
  .icoColor7 {
      color: #c5e1a5;
  }
  
  /* Заявка - Отклонена*/
  .icoColor8 {
      color: #f48fb1;
  }
  
  /* Цвет help*/
  .icoColor9 {
      color: #ce93d8;
  }
  
  
  .ui-card-content {
      padding: 0px !important;
  }
  
  .ui-card-footer {
      padding: 0px !important;
  }
  
  .myico {
      margin-right: 10px;
  }
  
  .new_order {
      background-color: #aaa;      
  }
  
  .inwork_order {
      background-color: #ffe082;      
  }
  
  .sogl_order {
      background-color: aquamarine;      
  }
  
  .exec_order {
      background-color: #4fbc47;      
  }
  
  .new_order_color {
      color: #aaa;      
  }
  
  .inwork_order_color {
      color: #ffe082;      
  }
  
  .sogl_order_color {
      color: aquamarine;      
  }
  
  .exec_order_color {
      color: #4fbc47;      
  }
  
  #frmMain:data:orders:col1 {
      width: 2px !important;
      padding: 2px !important;
  }  
  
  .trash {
      font-size: 3em !important;
      color: #f48fb1;
  }
  
  .prim {
      color: #999; font-size: 0.9em; font-style: italic;
  }
  
  .srokOrange {
      background-color: #ffcc66 !important;      
  }
  
  .srokRed {
      background-color: #ff6666 !important;      
  }
  
  .ql-container {
      font-size: 14px !important;
  }
  
.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Расстояние между элементами */
}
.flex-item {
    flex: 1 1 300px; /* flex-grow, flex-shrink, flex-basis */
    min-width: 300px; /* Минимальная ширина элемента */    
    /*border: 1px solid #ccc;
    padding: 20px;*/
    box-sizing: border-box;
    text-align: left;
}

#pnMain_content .ui-accordion-content {
  /*background-color: #424548;*/
}

.clRed {
    color: #f00;
}

.clGreen {
    color: #99cc00;
}