﻿/* DEFAULTS
----------------------------------------------------------*/

body {
    background: #EAEAEA;
    background-image: url(../Resources/Images/schalter-logo-2017-min.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 99% 99%;
    font-size: .80em;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    padding: 0px;
}

a:link, a:visited { color: #034af3; }

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active { color: #034af3; }

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}


/* HEADINGS   
----------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
    font-size: 1.5em;
    color: #666666;
    font-variant: small-caps;
    text-transform: none;
    font-weight: 200;
    margin-bottom: 0px;
}

h1 {
    font-size: 1.6em;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

h2 {
    font-size: 1.5em;
    font-weight: 600;
}

h3 { font-size: 1.2em; }

h4 { font-size: 1.1em; }

h5, h6 { font-size: 1em; }

/* this rule styles <h1> and <h2> tags that are the 
first child of the left and right table columns */

.rightColumn > h1, .rightColumn > h2, .leftColumn > h1, .leftColumn > h2 { margin-top: 0px; }


/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

.page {
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
}

.header {
    background-image: url(../Resources/Images/headright.png);
    background-repeat: no-repeat;
    background-position: right;
    position: relative;
    margin: 0px;
    padding: 0px;
    /*background: #4b6c9e;*/
    background-color: #346ca1;
    width: 100%;
    top: 0px;
    left: 0px;
}

.header h1 {
    border-style: none;
    border-color: inherit;
    border-width: medium;
    font-weight: 700;
    margin: 0px;
    padding: 0px 0px 0px 20px;
    color: #f9f9f9;
    line-height: 2em;
    font-size: 2em;
    width: 322px;
}

.main {
    padding: 0px 12px;
    margin: 12px 8px 8px 8px;
    min-height: 420px;
}

.leftCol {
    padding: 6px 0px;
    margin: 12px 8px 8px 8px;
    width: 200px;
    min-height: 200px;
}

.footer {
    color: #4e5766;
    padding: 8px 0px 0px 0px;
    margin: 0px auto;
    text-align: center;
    line-height: normal;
}

/* LOGIN MENU
----------------------------------------------------------*/

#login-box {
    width: 333px;
    height: 352px;
    padding: 58px 76px 0 76px;
    color: #ebebeb;
    font: 12px Arial, Helvetica, sans-serif;
    background: url(../Resources/Images/login-box-backg.png) no-repeat left top;
}

#login-box img { border: none; }

#login-box h2 {
    padding: 0;
    margin: 0;
    color: #ebebeb;
    font: bold 44px "Calibri", Arial;
    line-height: 38px;
    padding-bottom: 5px;
}

.login-box-name {
    float: left;
    display: inline;
    width: 80px;
    text-align: right;
    padding: 14px 10px 0 0;
    margin: 0 0 7px 0;
}

#login-box-name {
    float: left;
    display: inline;
    width: 80px;
    text-align: right;
    padding: 14px 10px 0 0;
    margin: 0 0 7px 0;
}

.login-box-field {
    float: left;
    display: inline;
    width: 230px;
    margin: 0;
    margin: 0 0 7px 0;
}

#login-box-field {
    float: left;
    display: inline;
    width: 230px;
    margin: 0;
    margin: 0 0 7px 0;
}

.clear-fix {
    width: 100%;
}

.clear-fix:after{
    content: "";
    width: 100%;
    display: table;
    clear: both;
}

#about-box h2 {
    padding: 0;
    margin: 0;
    color: #ebebeb;
    font: bold 44px "Calibri", Arial;
}

.form-login {
    width: 205px;
    padding: 10px 4px 6px 3px;
    border: 1px solid #0d2c52 !important;
    background-color: #1e4f8a !important;
    font-size: 16px;
    color: #ebebeb !important;
}


.login-box-options {
    clear: both;
    padding-left: 87px;
    font-size: 11px;
}

.login-box-options a {
    color: #ebebeb;
    font-size: 11px;
}

.centered {
    display: block;
    position: absolute;
    top: 25%;
    left: 35%;
}

/* TAB MENU   
----------------------------------------------------------*/

div.hideSkiplink {
    /*background-color:#2a4d63;*/
    margin-left: 350px;
    margin-right: 350px;
    padding-top: 51px;
}

div.hideSkiplinkInside {
    background-color: #2a4d63;
    height: 33px;
    vertical-align: middle;
    padding-top: 2px;
}


div.leftSkiplink {
    width: 100%;
    height: 86px;
    background-image: url('../Resources/Images/headleft.png');
    background-repeat: no-repeat;
    background-position: left;
}

div.menu { padding: 4px 0px 4px 8px; }

.about22 { background-image: url('../Resources/Images/about22.png'); }

.logout22 { background-image: url('../Resources/Images/logout22.png'); }

.profile22 { background-image: url('../Resources/Images/profile-22.png'); }

.accept22 { background-image: url('../Resources/Images/ok-22.png'); }

.spinner22 { background-image: url('../Resources/Images/spinner22.gif'); }

.chat22 { background-image: url('../Resources/Images/chat-22.png'); }

.menutoolbar {
    float: right;
    color: White;
}

.menutoolbar td { background-position: 1000px 1000px; }

.menutoolbar .x-btn-text {
    color: White;
    font-size: small;
}


div.menu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    width: auto;
}

div.menu ul li a, div.menu ul li a:visited {
    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
}

div.menu ul li a:hover {
    background-color: #bfcbd6;
    color: #465c71;
    text-decoration: none;
}

div.menu ul li a:active {
    background-color: #465c71;
    color: #cfdbe6;
    text-decoration: none;
}

/* FORM ELEMENTS   
----------------------------------------------------------*/

fieldset {
    margin: 1em 0px;
    padding: 1em;
    border: 1px solid #ccc;
}

fieldset p { margin: 2px 12px 10px 10px; }

fieldset.login label, fieldset.register label, fieldset.changePassword label { display: block; }

fieldset label.inline { display: inline; }

legend {
    font-size: 1.1em;
    font-weight: 600;
    padding: 2px 4px 8px 4px;
}

input.textEntry {
    width: 320px;
    border: 1px solid #ccc;
}

input.passwordEntry {
    width: 320px;
    border: 1px solid #ccc;
}

div.accountInfo { width: 42%; }

/* MISC  
----------------------------------------------------------*/

.clear { clear: both; }

.clearleft { clear: left; }

.title {
    display: block;
    float: left;
    text-align: left;
    width: auto;
}

.loginDisplay2 {
    font-size: 1.1em;
    display: block;
    margin-top: 43px;
    padding: 10px;
    text-align: right;
    color: White;
    float: right;
}

.loginDisplay a:link { color: white; }

.loginDisplay a:visited { color: white; }

.loginDisplay a:hover { color: white; }

.failureNotification {
    font-size: 1.2em;
    color: Red;
}

.bold { font-weight: bold; }

.submitButton {
    text-align: right;
    padding-right: 10px;
}

/* terminal */

.rdp60 {
    background-image: url('../Resources/Images/rdp-60.png');
    height: 60px;
    width: 60px;
    background-repeat: no-repeat;
}

.rdp32 {
    background-image: url('../Resources/Images/rdp-32.png');
    background-repeat: no-repeat;
}

.btnterminal { float: inherit; }

/*.btnterminal td { background-position: 1000px 1000px;}*/

/* .btnterminal .x-btn-text { color: Black;
    font-size:small; }*/

.extruder.right.a .flap{
    font-size:18px;
    color:white;
    top:0;
    padding:10px 0 10px 10px;
    background:#eee;
    width:30px;
    position:absolute;
    right:0;
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-top-right-radius:10px;
    -webkit-border-bottom-right-radius:10px;
    /*-moz-box-shadow:#666 2px 0px 3px;
    -webkit-box-shadow:#666 2px 0px 3px;*/
}
 
.extruder.right.a .content{
    border-right:3px solid #772B14;
    background:rgba(255,255,255,.95);
}

.extruder.right .flap {
    font-size: 18px;
    color: white;
    top: 0;
    padding: 10px 0 10px 0px !important;
    background: #000;
    position: absolute;
    left: -27px !important;
}
 
.extruder.top .optionsPanel .panelVoice a:hover{
    color:#fff;
    /*background: url("elements/black_op_30.png");*/
    border-bottom:1px solid #000;
}
.extruder.top .optionsPanel .panelVoice a{
    border-bottom:1px solid #000;
}

.extruder.right.a .flap .flapLabel {
    background: #772B14;
}

.extruder-content div.text {
    text-shadow:none!important;
}

div.flap {
    top:80% !important;
}

/* LIST SOURCE  
----------------------------------------------------------*/

.agencylist-source
.profilelist-source
.userlist-source
.terminallist-source
.terminalsgrouplist-source
.servicelist-source
.servicesgrouplist-source
.typequeuelist-source
.categorylist-source
.categoryservicelist-source
.categorydetail-source
.hangreasonlist-source
.queuetypedetail-source
.queuetypelist-source 
.clientlist-source
.ticketlist-source
.dispenserlist-source
{
    cursor: pointer;
    overflow: hidden;
    border: 1px #bbb black;
    display: inline-table;
}

/* DETAIL TARGET  
----------------------------------------------------------*/

.agencydetail-target
.profiledetail-target
.userdetail-target
.terminaldetail-target
.terminalsgroupdetail-target
.servicedetail-target
.servicesgroupdetail-target
.categorydetail-target 
.categoryservicedetail-target
.hangreasondetail-target 
.clientdetail-target
.ticketdetail-target
{
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    width: inherit;
    height: inherit;
    min-height: 50px;
    min-width: 50px;
}

/* LIST TARGET  
----------------------------------------------------------*/

.agencylist-target
.profilelist-target
.userlist-target
.terminallist-target
.terminalsgrouplist-target
.servicelist-target
.servicesgrouplist-target
.categorylist-target
.categoryservicelist-target 
.hangreasonlist-target
.clientlist-target
.ticketlist-target
 {
    font-family: verdana, arial, sans-serif;
    font-size: 12px;
    width: inherit;
    height: inherit;
    min-height: 50px;
    min-width: 50px;
}

/* DETAIL TARGET TARGET HOVER  
----------------------------------------------------------*/

.agencydetail-target.target-hover
.userdetail-target.target-hover 
.profiledetail-target.target-hover
.terminaldetail-target.target-hover
.terminalsgroupdetail-target.target-hover
.servicedetail-target.target-hover
.servicesgroupdetail-target.target-hover
.categorydetail-target.target-hover
.categoryservicedetail-target.target-hover
.hangreasondetail-target.target-hover
.clientdetail-target.target-hover
.ticketdetail-target.target-hover
{ background-color: #ddd; }

/* LIST TARGET TARGET HOVER  
----------------------------------------------------------*/

.agencylist-target.target-hover
.profilelist-target.target-hover
.userlist-target.target-hover 
.terminallist-target.target-hover
.terminalsgrouplist-target.target-hover
.servicelist-target.target-hover
.servicesgrouplist-target.target-hover
.categorylist-target.target-hover
.categoryservicelist-target.target-hover
.hangreasonlist-target.target-hover
.clientlist-target.target-hover
.ticketlist-target.target-hover
{ background-color: #ddd; }

/* LIST ITEM 
----------------------------------------------------------*/

td.listitem-label {
    background-color: #ddd;
    border: 1px solid #bbb;
    font-weight: bold;
    text-align: right;
    width: 125px;
    padding: 0px 5px 0px 0px;
}

td.listitem-value { width: 300px; }

/* LIST TEMPLATE 
----------------------------------------------------------*/

.list-template-default {
    background-image: url(../Resources/Images/Lists/list-backgroud.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 64px;
    width: 70px;
}

.list-template-default-double {
    min-width:161px;
    max-width:500px;
    margin:5px;
    font-size: 11px;
    border-radius:5px;
    border:1px solid #ddd;
    box-shadow:2px 2px 4px rgba(0,0,0,0.3);
    background: rgb(235,233,225);
    background: linear-gradient(150deg, rgba(235,233,225,1) 0%, rgba(255,255,255,1) 100%);    
    display:inline-block;
    overflow: hidden;
}

.list-template-default-double table { width:100%; min-height:66px; }
.list-template-default-double table > tbody > tr > td:nth-child(1) { width:64px; text-align:center; position:relative; }
.list-template-default-double table > tbody > tr > td:nth-child(1):after { content:''; width:1px; height:calc(100% - 20px); background:#ddd; display:block; position:absolute; top:50%; right:0; transform:translate(0,-50%); }
.list-template-default-double table > tbody > tr > td span { padding:10px; display:inline-block; }

.list-template-default-double-text {
    width: auto;
    height: auto;
}

.list-template-default-triple {
    background-image: url(../Resources/Images/Lists/list-backgroud-triple.png);
    background-repeat: no-repeat;
    background-position: center;
    height: 66px;
    width: 250px;
}

.list-template-default img { vertical-align: middle; }

.list-template-default-double img { max-width:54px; vertical-align: middle; }

.list-template-default-triple img { vertical-align: middle; }

.list-template-default-desc {
    text-align: center;
    height: 100px;
    width: 80px;
}

.dataview-block {
    background-color: White !important;
    visibility: hidden;

    display:none;
}

.combo-template-default {
    background-image: url(../Resources/Images/Lists/list-backgroud.png);
    background-repeat: no-repeat;
    background-position: left;
    padding: 5px;
    text-align: center;
}

.combo-template-default img { vertical-align: middle; }