/* GENERAL STUFF **********************************************************************************/
 
* { margin: 0; padding: 0; outline: none; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif }

html { overflow-y: scroll }
noscript { font-weight: bold; color: red }
li { list-style: none }
a { text-decoration: none; color: inherit; font-weight: inherit }
a:hover { color: blue }
h1 { font-size: 14px; font-weight: normal; margin: 0 auto; text-align: left; background: #F5F5F5; padding: 13px; border-bottom: 1px #ddd solid; overflow: hidden }
h2 { font-size: 16px; font-weight: normal; margin: 0 auto 2em; text-align: left }

label { display: block; margin: 1em 0 .5em 0; font-weight: bold; font-size: 14px }

/* INPUT FIELDS AND BUTTONS ***********************************************************************/

input { display: block; border: 1px gray solid; padding: 1px 3px; border-radius: 3px }

input[type='text'] ,
input[type='password'],
textarea { font-size: 14px; padding: 6px 12px; color: #555; border: 1px solid #ccc; border-radius: 4px; width: 170px; margin-left: 1em; box-shadow: inset 0 1px 1px rgba(0,0,0,.075) }

button[type='submit'] { background: #337AB7; cursor: pointer; color: white; padding: 6px 16px; margin: 2.5em auto 1em; letter-spacing: 1px; border: 1px gray solid; border-radius: 3px; display: block }
button[type='submit']:hover { background: #286090 }

input[type='button'] { background: #F5F5F5;  width: 230px; line-height: 150%; height: 30px; margin: 0 auto .5em; cursor: pointer; letter-spacing: 1px; font-weight: bold; font-size: 13px; border: 1px #ddd solid }
input:hover[type='button'] { color: gray }

input:disabled  { background: lightgray; color: #aaa !important }

/* MISC *******************************************************************************************/

#error { font-size: 14px; background: #D9EDF7; color: black; text-align: left; font-weight: normal; padding: 20px 10px 20px 30px }
#wrapper { border: 1px #ddd solid; margin: 1em; width: 260px; border-radius: 3px; font-size: 16px; padding-bottom: 1em; box-shadow: 0 1px 1px rgba(0,0,0,.05) }
#inside { margin: 2em 1em .5em; font-size: 14px }

/* color of placeholder="this test" */

::-webkit-input-placeholder { color: #c1c1c1 }
:-moz-placeholder { color: #c1c1c1 }
::-moz-placeholder { color: #c1c1c1 }
:-ms-input-placeholder { color: #c1c1c1 }

/* dropdown menu (logout+change password) */

span#logout { font-size: 12px; float: right; cursor: pointer; text-align: center; padding: 1px 3px; border-radius: 2px; height: 14px }

ul#menu { clear:both; background: white; border-radius: 2px; border: 1px gray solid; position: absolute; z-index: 999; font-size: 14px; margin: 2px 3px; display: none }
ul#menu i { padding-right: .5em }
ul#menu a { display: block; padding: 5px 15px }
ul#menu a:hover { background: #eee; color: black }

/* INFO (DASHBOARD ELEMENTS ***********************************************************************/

span { padding: 0 .25em 0 0 }

.status { border: 1px black solid; margin-bottom: -1px; margin-right: 7px }
#status_image { width: 13px; height: 13px; border-radius: 3px; border: none; margin-right: 10px }

#destination_name { font-weight: bold }
#destination_name, #msisdn, #total { padding-left: 10px }

/* status background (square icon) */

.offline { background: black }
.ready { background: green }
.dnd { background: #f00 }
.post_processing { background: #f00 }
.busy { background: orange }
.incoming_call { background: orange }
.in_call { background: orange }

#groups { display: block; margin: 0.25em 0 1em 16px; padding-left: 10px; clear: both }
#groups > div { float: left; width: 100% }
#groups span.name { width: 100px; float: left; overflow: hidden; display: block }
#groups span.callcenter { width: 45px; float: right; opacity: .7; display: block }

#destinations { margin: 0.25em 0 0.25em 0; font-size: 14px; padding-left: 10px; white-space: nowrap }
#destinations:hover { color: blue; cursor: pointer }

#calls { display: block; margin: -.5em 0 1em 16px; padding-left: 10px }
#calls > div { display: block; width: 100%; float: left }
#calls span.totals { width: 95px; float: right; opacity: .7 }

#groups_mode { float: right; margin-right: -5px; padding-top: -1px; cursor: pointer }

#current_group { display: block; margin: 0 0 0 16px; padding-left: 10px }

#profile { padding-left: 27px; font-size: small }

div.title { margin: 1em 0 0 }

#buttons { margin: 2em 0 0 }
#dest { margin: 0 0 1em }
#dnd_reason { color: #333 }

#logo { text-align: center; margin-top: 1.5em; font-size: small }
#logo a { display: block; opacity: .7 }
#logo a:hover { opacity: 1 }

.fa { width: 13px }

/* popup text */

.popup_reasons { text-align : left; font-size: 14px; width: 250px; padding-bottom: 1.5em; overflow: hidden; margin: 0 auto }
.popup_reasons > span { display: block; border: 1px white solid; line-height: 14px; padding: 0.5px 1em; cursor: pointer; font-weight: bold; line-height: 150% }
.popup_reasons > span:hover { color: blue }
.popup_reasons label { display: inline; font-weight: normal }

#popup_remark { margin-bottom: 1em }

label.pass { text-align: left }

/* RESPONSIVE *************************************************************************************/

@media only screen and (max-width: 320px), only screen and (max-device-width: 320px)
{
	#wrapper { width: auto }
	input[type='button'] { width: calc(100% - 2.5em) }
	input[type='text'],
	input[type='password'] { width: calc(100% - 40px) }
	button[type='submit'] { letter-spacing: 0 }
}