/*
https://coolors.co/f5f5f5-ececec-e3e3e3-dbdbdb-d2d2d2-c9c9c9-c1c1c1-b8b8b8-afafaf-a7a7a7
https://coolors.co/111111-222222-333333-444444-555555-666666-777777-888888-999999-AAAAAA
*/

/************/
/* Colors */
/************/

:root{
    
    /*active*/
    --background-color-active-yes: #429B42;
    --color-active-yes: #FFFFFF;
    --background-color-active-no: #F43F5E;
    --color-active-no: #FFFFFF;
    
    /*generic-icons*/
    --ico-generic-checkbox: url("../img/ico_generic_checkbox.png"); 
    --ico-generic-edit: url("../img/ico_generic_edit.png"); 
    
    /*letterico*/
    --background-color-letter-icon1: linear-gradient(45deg, rgba(242,145,0,1) 0%, rgba(232,78,27,1) 100%);
    --color-letter-icon1: #FFFFFF;
        
    /*popmsg*/
    --background-color-popmsg0: #87bd23;
    --color-popmsg0: #ffffff;
    --background-color-popmsg1: #ff9913;
    --color-popmsg1: #ffffff;
    --background-color-popmsg2: #dc2626;
    --color-popmsg2: #ffffff;
    --background-color-popmsg3: #dc2626;
    --color-popmsg3: #ffffff;
    
    /*mask*/
    --background-color-mask0: #666666;    

    /*logo*/
    --logo-otrs: url("../img/logoOTRS.png"); 
    
}
    
:root,
:root.light {
    --background-color0: #FFFFFF;
    --border-color0: #E0E0E0;
    --color0: #555555;

    --background-color1: #F5F5F5;
    --border-color1: #D8D8D8;
    --color1: #555555;

    --background-color2: #ECECEC;
    --border-color2: #CCCCCC;
    --color2: #666666;

    --background-color3: #E3E3E3;
    --border-color3: #C4C4C4;
    --color3: #666666;

    --background-color4: #DBDBDB;
    --border-color4: #BFBFBF;
    --color4: #666666;

    --background-color5: #D2D2D2;
    --border-color5: #BABABA;
    --color5: #777777;

    --background-color6: #C9C9C9;
    --border-color6: #B5B5B5;
    --color6: #888888;

    --background-color7: #C1C1C1;
    --border-color7: #B0B0B0;
    --color7: #999999;

    --background-color8: #B8B8B8;
    --border-color8: #AAAAAA;
    --color8: #999999;

    --background-color9: #AFAFAF;
    --border-color9: #A5A5A5;
    --color9: #999999;

    --background-color10: #A7A7A7;
    --border-color10: #A0A0A0;
    --color10: #999999;
    
    /*button*/
    --background-color-button1: #E69356;
    --color-button1: #FFFFFF;
    --border-color-button1: #D38349;
    --background-color-button2: #CD7331;
    --color-button2: #FFFFFF;
    --border-color-button2: #D38349;
    
    /*icon*/
    --ico-calendar: url("../img/ico_calendar_gray.png");                
    --ico-edit: url("../img/ico_edit_gray.png");       
    --ico-elements: url("../img/ico_elements.png");       
    --ico-eye: url("../img/ico_edit_gray.png"); 
    --ico-eye: url("../img/ico_eye_gray.png"); 
    --ico-eyex: url("../img/ico_eyex_gray.png"); 
    --ico-gear: url("../img/ico_gear_gray.png"); 
    --ico-gt: url("../img/ico_gt_gray.png"); 
    --ico-lt: url("../img/ico_lt_gray.png"); 
    --ico-more: url("../img/ico_more_gray.png"); 
    --ico-options: url("../img/ico_options_gray.png"); 
    --ico-reload: url("../img/ico_reload_gray.png"); 
    --ico-report: url("../img/ico_report_gray.png"); 
    --ico-shield: url("../img/ico_shield_gray.png"); 
    --ico-trash: url("../img/ico_trash_gray.png"); 
    
    /*table*/
    --background-color-th0: #E69356;
    --background-color-th-chkbx-checked-0: #883808;
    --color-th0: #FFFFFF;
    --border-color-th0: #D38349;
    
    /*input time*/
    --filter-input-time-brightness: 35%;
    
    /*State*/
    --background-color-state0: #4CAF50;
    --color-state0: #FFFFFF;
    --background-color-state1: #FCD45E;
    --color-state1: #000000;
    --background-color-state2: #FF5252;
    --color-state2: #FFFFFF;
    --background-color-state3: #B0BEC5;
    --color-state3: #000000;
}

:root.dark{
    --background-color0: #121212;
    --border-color0: #333333;
    --color0: #CCCCDC;      
    
    --background-color1: #151515;
    --border-color1: #333333;
    --color1: #CCCCDC;    
    
    --background-color2: #222222;
    --border-color2: #444444;
    --color2: #CCCCDC;
    
    --background-color3: #333333;
    --border-color3: #555555;
    --color3: #CCCCDC;
    
    --background-color4: #444444;
    --border-color4: #666666;
    --color4: #CCCCDC;
    
    --background-color5: #555555;
    --border-color5: #777777;
    --color5: #CCCCDC;
    
    --background-color6: #666666;
    --border-color6: #888888;
    --color6: #CCCCDC;
    
    --background-color7: #777777;
    --border-color7: #999999;
    --color7: #CCCCDC;
    
    --background-color8: #888888;
    --border-color8: #AAAAAA;
    --color8: #CCCCDC;
    
    --background-color9: #999999;
    --border-color9: #BBBBBB;
    --color9: #CCCCDC;
    
    --background-color10: #AAAAAA;
    --border-color10: #898989;
    --color10: #898989;
    
    /*button*/
    --background-color-button1: #D16F33;
    --color-button1: #FFFFFF;
    --border-color-button1: #A14D21;
    --background-color-button2: #A14D21;
    --color-button2: #FFFFFF;
    --border-color-button2: #A14D21;
    
    /*icon*/
    --ico-calendar: url("../img/ico_calendar_white.png"); 
    --ico-edit: url("../img/ico_edit_white.png"); 
    --ico-elements: url("../img/ico_elements_transparent.png");    
    --ico-eye: url("../img/ico_eye_white.png"); 
    --ico-eyex: url("../img/ico_eyex_white.png"); 
    --ico-gear: url("../img/ico_gear_white.png"); 
    --ico-gt: url("../img/ico_gt_white.png"); 
    --ico-lt: url("../img/ico_lt_white.png"); 
    --ico-more: url("../img/ico_more_white.png"); 
    --ico-options: url("../img/ico_options_white.png"); 
    --ico-reload: url("../img/ico_reload_white.png"); 
    --ico-report: url("../img/ico_report_white.png"); 
    --ico-shield: url("../img/ico_shield_white.png"); 
    --ico-trash: url("../img/ico_trash_white.png"); 
    
    /*table*/
    --background-color-th0: #D16F33;
    --color-th0: #FFFFFF;
    --border-color-th0: #A14D21;
    
    /*input time*/
    --filter-input-time-brightness: 80%;
    
    /*State*/
    --background-color-state0: #2E7D32;
    --color-state0: #FFFFFF;
    --background-color-state1: #FFEB3B;
    --color-state1: #000000;
    --background-color-state2: #FF5252;
    --color-state2: #FFFFFF;
    --background-color-state3: #B0BEC5;
    --color-state3: #000000;
}

/***********/
/* General */
/***********/

*{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: "Arial";
    font-size:12px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    cursor: default;
}

html{
    background-color: var(--background-color1);
}

/************/
/* Elements */
/************/

a:hover{
    cursor: pointer;
}

button{
    background-color: var(--background-color-button1);
    border-radius: 3px;
    border: 1px solid var(--border-color-button2);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;    
    color: var(--color-button1);
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    transition: background 250ms;
    -webkit-transition: background 250ms;
    -moz-transition: background  250ms;
    -o-transition: background  250ms;    
}
button:hover{
    background-color: var(--background-color-button2);
    color: var(--color-button2);
}
button.s2{   
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    outline: none;
    padding-left: 10px;
    padding-right: 10px;
    transition: background 250ms;
    -webkit-transition: background 250ms;
    -moz-transition: background  250ms;
    -o-transition: background  250ms;    
}

h1{
    font-size: 24px;
}

h2 > a,
h2{
    font-size: 20px;
}

h3{
    font-size: 16px;
}

input[type="submit"]{
    background-color: var(--background-color-button1);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;    
    color: var(--color-button1);
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
    transition: background 250ms;
    -webkit-transition: background 250ms;
    -moz-transition: background  250ms;
    -o-transition: background  250ms;    
}
input[type="submit"]:hover{
    background-color: var(--background-color-button2);
    color: var(--color-button2);
}
input[type="submit"].s2{   
    font-size: 14px;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    outline: none;
    padding-left: 10px;
    padding-right: 10px;
    transition: background 250ms;
    -webkit-transition: background 250ms;
    -moz-transition: background  250ms;
    -o-transition: background  250ms;    
}

input[type="time"]::-webkit-calendar-picker-indicator{
  filter: 
      invert(100%) 
      sepia(0%) 
      saturate(0%) 
      hue-rotate(0deg) 
      brightness(var(--filter-input-time-brightness)) 
      contrast(100%);
}

input[type="password"],
input[type="time"],
input[type="text"]{
    background-color: var(--background-color0);
    border: 1px solid var(--border-color0);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px; 
    color: var(--color0);
    cursor: text;
    height: 30px;
    line-height: 30px;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
}
input[type="password"].s2,
input[type="text"].s2{
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    padding-right: 10px;
}

select{
    background-color: var(--background-color0);
    border: 1px solid var(--border-color0);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px; 
    color: var(--color0);
    height: 30px;
    line-height: 30px;
    outline: none;
    padding-left: 5px;
    padding-right: 3px;
}

table{
    border-collapse: collapse;
}

textarea{
    background-color: var(--background-color0);
    border: 1px solid var(--border-color0);
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px; 
    color: var(--color0);
    cursor: text;
    outline: none;
    padding-left: 5px;
    padding-right: 5px;
}
textarea.readonly{
    color: var(--color10);
}
textarea.readonly:focus,
textarea.readonly:focus-within,
textarea.readonly:hover{
    cursor: default;
    border: 1px solid var(--border-color0) !important;
}

/*************/
/*    IMG    */
/*************/

.icoGW{
    background-image: url("../img/icoGW.png");
}

.icoElements{ 
    background-image: var(--ico-elements);
}

.logoGW002{
    background-image: url("../img/GW-logo-0002.png");
}


.icoCalendar{ 
    background-image: var(--ico-calendar);
}

.icoEdit{ 
    background-image: var(--ico-edit);
}

.icoGenericCheckbox{ 
    background-image: var(--ico-generic-checkbox);
}

.icoEye{ 
    background-image: var(--ico-eye);
}
 
.icoEyeX{ 
    background-image: var(--ico-eyex);
}

.icoGear{ 
    background-image: var(--ico-gear);
}

.icoGenericEdit{ 
    background-image: var(--ico-generic-edit);
}
 
.icoGT{ 
    background-image: var(--ico-gt);
}

.icoLT{ 
    background-image: var(--ico-lt);
}
  
.icoMore{ 
    background-image: var(--ico-more);
}

.icoOptions{ 
    background-image: var(--ico-options);
}

.icoReload{ 
    background-image: var(--ico-reload);
}

.icoReport{ 
    background-image: var(--ico-report);
}

.icoShield{ 
    background-image: var(--ico-shield);
}

.icoTrash{ 
    background-image: var(--ico-trash);
}

.logoOTRS{ 
    background-image: var(--logo-otrs);
}
 
.letterIco{   
    height: 30px;
    line-height: 30px;
    display: table-cell;
    vertical-align: middle;
    -webkit-transition: all 0.1s ease;
    -moz-transition: all 0.1s ease;
    -o-transition: all 0.1s ease;
    transition: all 0.1s ease;
} 
.letterIco > div{
    background: var(--background-color-letter-icon1);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    color: var(--color-letter-icon1);
    cursor: pointer;
    font-size: 150%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 30px;
}

/*************/
/*   ONOFF   */
/*************/

.onoff{
    user-select: none;
}

.onoff input[type="radio"] {
    display: none;    
}

.onoff label{
    cursor: pointer;
    height: 25px;
    line-height: 25px;
    width: 30px;
    border: 1px solid var(--border-color5);    
    display: inline-block;
    text-align: center;
}

.onoff label.label-off{
    margin-left:-4px;
}

.onoff .label-off,
.onoff .label-on{
    background-color: var(--background-color2);
}

.onoff .radio-on:checked + .label-on {
    background-color: var(--background-color-active-yes);
    border: 1px solid var(--background-color-active-yes);
    color: var(--color-active-yes);
}

.onoff .radio-off:checked + .label-off {
    background-color: var(--background-color-active-no);
    border: 1px solid var(--background-color-active-no);
    color: var(--color-active-no);
}


/*************/
/* POPUP MSG */
/*************/

#ppMsg{
    display: none;
    opacity: 0;
    margin: 20px auto;
    background-color: #858585;
    color: #ffffff;
    border-radius: 5px;
    padding:10px 20px;
    min-height: 40px;
    height: auto;
    line-height: 24px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    left: 50%;
    z-index:999;
    transform: translate(-50%, -0%);
    transition: 300ms all;
}

#ppMsg.color0{
    background-color: var(--background-color-popmsg0);
    color: var(--color-popmsg0);
}

#ppMsg.color1{
    background-color: var(--background-color-popmsg1);
    color: var(--color-popmsg1);
}

#ppMsg.color2{
    background-color: var(--background-color-popmsg2);
    color: var(--color-popmsg2);
}

#ppMsg.color3{
    background-color: var(--background-color-popmsg3);
    color: var(--color-popmsg3);
}

/*************/
/* POPUP WIN */
/*************/

#ppMsk{
    background-color: var(--background-color-mask0);
    bottom: 0px;
    display: none;
    left: 0px;
    opacity: 0.5;
    position: fixed;
    right: 0px;
    top: 0px;
    transition: 50ms all;
    z-index: 0;
}

#ppWin{
    border: 2px solid var(--border-color2);
    background-color: var(--background-color2);
    color: var(--color2);
    border-radius: 5px 5px;
    -webkit-border-radius: 5px 5px;
    -moz-border-radius: 5px 5px;
    -o-border-radius: 5px 5px;   
    left: 50%;
    margin: 0px auto;
    opacity: 0;
    position:absolute;
    top: 20px;
    transform: translate(-50%, -0%);
    transition: 50ms all;
    z-index: 0;
}

#ppWin .content{
    overflow-y: auto;
    width: 100%;
    height: calc(100% - 40px);
    line-height: 18px;
}
#ppWin .fotter{  
    width: 100%;
    height: 30px;
    margin-top: 10px;
}

#ppWin .fotter button{
    margin-left: 10px;
    width: 100px;
}

/**************/
/* SCROLL BAR */
/**************/

/* Estilizando a barra de rolagem */
/* Barra de rolagem */
::-webkit-scrollbar {
    width: 8px; /* Largura da barra de rolagem */
    height: 8px; /* Largura da barra de rolagem */
}

/* Botão da barra de rolagem (o "pulso") */
::-webkit-scrollbar-thumb {
    background: var(--background-color4); /* Cor de fundo do pulso */
    border-radius: 1px; /* Borda arredondada do pulso */
}

/* Área de trilha da barra de rolagem */
::-webkit-scrollbar-track {
    background: var(--background-color0); /* Cor de fundo da trilha */
}

/* Mudar a cor do pulso quando o mouse passa por cima */
::-webkit-scrollbar-thumb:hover {
    background: var(--background-color5); /* Cor de fundo do pulso ao passar o mouse por cima */
}

/* Barra de rolagem para Firefox */
/* Largura da barra de rolagem */
div *{
    scrollbar-width: thin;
    scrollbar-color: var(--background-color4) var(--background-color0); /* Cor da barra e da área de trilha */
}

/**********/
/* STATES */
/**********/
.state0{
    background-color: var(--background-color-state0);
    color: var(--color-state0);
}
.state1{
    background-color: var(--background-color-state1);
    color: var(--color-state1);
}
.state2{
    background-color: var(--background-color-state2);
    color: var(--color-state2);
}
.state3{
    background-color: var(--background-color-state3);
    color: var(--color-state3);
}