/* MAIN --------------------------------------------------------------------- */

html { font-size: 100%; }
body { font-size: 95%; font-family: arial, helvetica, verdana; text-align: center; padding: 0px; margin: 0px; top:0; left:0; right:0; bottom:0; }
body * { font-family: arial, helvetica, verdana; font-size: 1em; }

h1 { font-size: 1.3em; margin: 0px; padding: 8px 5px 6px 5px; }
h2 { font-size: 1.24em; margin: 0px; padding: 7px 5px 5px 5px; }
h3 { font-size: 1.18em; margin: 0px; padding: 6px 5px 4px 5px; }
h4 { font-size: 1.12em; margin: 0px; padding: 5px 5px 3px 5px; }
h5 { font-size: 1.06em; margin: 0px; padding: 4px 5px 2px 5px; }
h6 { font-size: 1.0em; margin: 0px; padding: 3px 5px 1px 5px; }

a { color: #09629D; text-decoration: none; }
a:hover { color: #09629D; }

p { font-size: 1em; margin: 0px; padding: 2px 5px; }
input, textarea, select { font-size: 1em; }
img { margin: 0px; }

/* MAIN --------------------------------------------------------------------- */

.Main { display: block; width: 98%; height: auto; margin: 1.25% 1%; padding: 0px; }

.brand { 
  position: absolute; 
  top: 0; left: 0; 
  margin: 10px 20px; 
  }

/* header */

.Main > header { width: 100%; }

.Main > header > div { height: 4em; }
.Main > header > div > figure { float: left; display: inline-block; margin: -0.5% 0px 0px 3px; }
.Main > header > div > figure img { margin: 0px; }
.Main > header > div > nav.links { float: right; display: inline-block; margin: 0.25em; }
.Main > header > div > nav.links a { display: inline-block; margin: 0px 0.5em; font-weight: bold; }

.Main > header > nav { }
.Main > header > nav ul li { line-height: 2.5em; padding: 2px 1em; }

.Main > header > nav.topmenu { width: 100%; text-align: left; font-size: 1.16em; }
.Main > header > nav.topmenu ul { width: 100%; padding: 0px; margin: 0px; display: block; }
.Main > header > nav.topmenu ul li { display: inline-block; }
.Main > header > nav.topmenu ul li a { display: block; }
.Main > header > nav.topmenu ul li.active { background-color: #DAF0FF; }
.Main > header > nav.topmenu ul li:hover { background-color: #DAF0FF; }

.Main > header > nav.submenu { width: 100%; text-align: left; font-size: 1.1em; background-color: #DAF0FF; }
.Main > header > nav.submenu ul { width: 100%; padding: 0px; margin: 0px; }
.Main > header > nav.submenu ul li { display: inline-block; }
.Main > header > nav.submenu ul li a { display: block; }

/* content */

.Main > section { width: 100%; text-align: left; }
.Main > section > .container { margin: 10px 1.1em; padding: 10px 0px; }

.Main > section > .container table { width: 100%; border-collapse: collapse; }
.Main > section > .container table thead tr { }
.Main > section > .container table thead tr th, table.formset th { text-align: left; line-height: 1.2em; color: #EC0677; padding: 2px 3px; text-align: center;}
.Main > section > .container table tbody tr { }
.Main > section > .container table tbody tr:hover, table.formset tr:hover  { background-color: #efefef; }
.Main > section > .container table tbody tr td, table.formset td { line-height: 1.5em; border: solid 2px #D9EFFE; padding: 0px 3px; }

/* DataTables */

.dataTable { }
.dataTable thead tr th { text-indent: 15px; text-align: left; }

.dataTable .sorting_asc { background: url('../img/datatable/sort_asc.png') no-repeat center left !important; }
.dataTable .sorting_desc { background: url('../img/datatable/sort_desc.png') no-repeat center left !important; }
.dataTable .sorting { background: url('../img/datatable/sort_both.png') no-repeat center left !important; }
.dataTable .sorting_asc_disabled { background: url('../img/datatable/sort_asc_disabled.png') no-repeat center left !important; }
.dataTable .sorting_desc_disabled { background: url('../img/datatable/sort_desc_disabled.png') no-repeat center left !important; }

.dataTables_length { margin-bottom: 10px !important; }
.dataTables_length label { color: #aaaaaa !important; }
.dataTables_length label select {
    background: transparent; background-image: none; color: #aaaaaa !important; border: solid 2px #D1E4F1; border-radius: 8px;
    padding: 3px 5px; margin-right: 5px; margin-left: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none;
}

.dataTables_filter { margin-bottom: 5px !important; }
.dataTables_filter label { color: #aaaaaa !important; }
.dataTables_filter label input { color: #aaaaaa !important; border: solid 2px #D1E4F1; border-radius: 8px; padding: 4px 5px; }

.dataTables_info { margin: 5px 0px 0px 0px; color: #aaaaaa !important; }
.dataTables_paginate { margin: 5px 0px 0px 0px; }

.dataTables_paginate.paging_simple_numbers a.paginate_button:hover { color: #09629D !important; }
.dataTables_paginate.paging_simple_numbers span a.paginate_button:hover { color: #09629D !important; }

.dataTables_paginate a.paginate_button { border: solid 0px !important; border-radius: 8px; background: none !important; }
.dataTables_paginate a.paginate_button:hover { background: #EBF6FF !important; }
.dataTables_paginate a.paginate_button.current { background: #EBF6FF !important; }
.dataTables_paginate a.paginate_button.disabled { background-color: white !important; color: red !important; }
.dataTables_paginate > a.paginate_button.previous { color: #09629D !important; }
.dataTables_paginate > a.paginate_button.next { color: #09629D !important; }

/* footer */

.Main > footer { width: 100%; }
.Main > footer > figure { }
.Main > footer > figure img { height: 50px; }

/* APP CONTAINER ------------------------------------------------------------ */

.APPcontainer {
    position: absolute; display: inline-block; overflow: auto; float: none;
    padding: 1% 1% 1% 1%; text-align: left; border: solid 2px #EBF6FF; background-color: white;
    -moz-box-shadow: 1px 1px 15px #999999; -webkit-box-shadow: 1px 1px 15px #999999;
    box-shadow: 1px 1px 15px #666666;
    filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=1, OffY=1, Color=#666666);
}

.APPcontainer { top: 15%; left: 30%; width: 500px; height: 420px; margin: 0px auto 0px 0px; }
.APPcontainer.mini { top: 25%; left: 30%; width: 280px; height: 280px; margin: 0px auto 0px 0px; }
.APPcontainer.small { top: 15%; left: 30%; width: 500px; height: 420px; margin: 0px auto 0px 0px; }
.APPcontainer.medium { top: 15%; left: 30%; width: 500px; height: 420px; margin: 0px auto 0px 0px; }
.APPcontainer.large { position:fixed !important; top: 15%; left: 27%; width: 825px; height: 480px; margin: 0px auto 0px 0px; }
.APPcontainer.full { position:fixed !important; top: 12% !important; left: 0 !important; bottom: 0 !important; right: 0 !important; width: 98% !important; height: 86% !important; margin: 0px 0px 0px 0px !important;}

/* medium size */
/* .APPcontainer { top: 15%; left: 20%; bottom: 15%; width: 60%; min-width: 320px; max-width: 60%; Xheight: 60%; margin: 0px auto 0px auto; } */
/* relative size */
/* .APPcontainer { top: 15%; left: 20%; width: 60%; min-width: 320px; max-width: 60%; height: 70%; margin: 0px auto 0px auto; } */
/* fix size */
/* .APPcontainer { top: 15%; left: 50%; width: 500px; height: 420px; margin: 0px auto 0px -250px;  } */

/* app header */

.APPcontainer header .info { height: 2.3em; border: solid 0px white; }
.APPcontainer header .info strong { font-size: 1.1em; height: 1.6em; line-height: 1.5em; padding-left: 0.25em; }
.APPcontainer header .info span { display: inline-block; float: right; width: 1em; height: 0.9em; line-height: 0.9em; text-align: center; font-size: 1.8em; background-color: transparent; color: #aaaaaa; cursor: pointer; padding: 0px; vertical-align: middle; }
.APPcontainer header .appmenu { width: 100%; min-width: 500px; }
.APPcontainer header .appmenu div { display: block; width: 100%; border: solid #EBF6FF; border-width: 0px 0px 2px 0px; overflow: visible; }
.APPcontainer header .appmenu a { display: inline-block; margin-bottom: -2px; padding: 3px 1em 4px 1em; border: solid #ffffff; border-width: 2px 2px 0px 2px; line-height: 1.5em; font-size: 1.1em; }
.APPcontainer header .appmenu a.active { background-color: #EBF6FF; border: solid #EBF6FF; border-width: 2px 2px 2px 2px; }
.APPcontainer header .appmenu a:hover { background-color: #EBF6FF; border: solid #EBF6FF; border-width: 2px 2px 0px 2px; border-bottom: solid #EBF6FF 2px; }

/* app content */

.APPcontainer section .container { width: 98%; margin: 0px; padding: 0px !important; margin: 0.75em 1%;}
.APPcontainer section .container_program_item { width: 98%; margin: 0px; padding: 0px !important; margin: 0.75em 1%; display: flex;}

.APPcontainer section .base_table { border: solid 0.05% #cccccc; border-spacing: 0px; border-collapse: collapse; margin: 0px 0px 0px 0px; width: 100%; }
.APPcontainer section .base_table tr { background-color: #ffffff; }
.APPcontainer section .base_table tr:hover td { background-color: #efefef; }
.APPcontainer section .base_table tr.highlight { background-color: #e5e5e5; }
.APPcontainer section .base_table th { border: solid 2px #EBF6FF; padding: 0px 5px; font-weight: normal; line-height: 1.6em; font-weight: bold; color: #09629D !important; }
.APPcontainer section .base_table td { border: solid 2px #EBF6FF; padding: 0px 5px; height: 1.5em; }

.APPcontainer section .w10 { width: 10%; }
.APPcontainer section .w20 { width: 20%; }
.APPcontainer section .w25 { width: 25%; }
.APPcontainer section .w30 { width: 30%; }
.APPcontainer section .w40 { width: 40%; }
.APPcontainer section .w50 { width: 50%; }
.APPcontainer section .w60 { width: 60%; }
.APPcontainer section .w70 { width: 70%; }
.APPcontainer section .w80 { width: 80%; }
.APPcontainer section .w90 { width: 90%; }
.APPcontainer section .w100 { width: 100%; }

/* overwrite! */

.APPcontainer section .dataTable.base_table { border: solid 0px white !important; border-spacing: 0px; border-collapse: collapse; }
.APPcontainer section .dataTable.base_table th { border: solid 0px white !important; border-spacing: 0px; border-collapse: collapse; height: 2em; }
.APPcontainer section .dataTables_filter { margin-bottom: 10px !important; }

/* ICONS --------------------------------------------------------------------- */

.fa.right { float: right; display: inline-block; }

/* .fa { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; background: #cccccc; vertical-align: bottom; } */
.fa { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; background: #cccccc; vertical-align: middle; }

/* base */
/* .fa.fa-easymusic-__ICON__ { url('../img/icons/__ICON__.svg') no-repeat top left !important; } */

/* nahrání */
.fa.fa-easymusic-upload { background: url('../img/icons/upload.svg') no-repeat top left; background-size: cover; }
/* soubory */
.fa.fa-easymusic-files { background: url('../img/icons/files.svg') no-repeat top left; background-size: cover; }
/* lokality */
.fa.fa-easymusic-locations { background: url('../img/icons/location.svg') no-repeat top left; background-size: cover; }
/* přidat */
.fa.fa-easymusic-add { background: url('../img/icons/add.svg') no-repeat top left; background-size: cover; }
/* login */
.fa.fa-easymusic-login { background: url('../img/icons/login.svg') no-repeat top left; background-size: cover; }
/* aktualizace */
.fa.fa-easymusic-update { background: url('../img/icons/update.svg') no-repeat top left; background-size: cover; }
/* přehrávače */
.fa.fa-easymusic-players { background: url('../img/icons/players.svg') no-repeat top left; background-size: cover; }
/* programy */
.fa.fa-easymusic-programs { background: url('../img/icons/programs.svg') no-repeat top left; background-size: cover; }
/* přidat do programu */
.fa.fa-easymusic-add-to-the-program { background: url('../img/icons/add_to_the_program.svg') no-repeat top left; background-size: cover; }
/* schválit */
.fa.fa-easymusic-ok { background: url('../img/icons/ok.svg') no-repeat top left; background-size: cover; }
/* editovat */
.fa.fa-easymusic-edit { background: url('../img/icons/edit.svg') no-repeat top left; background-size: cover; }
/* smazat */
.fa.fa-easymusic-delete { background: url('../img/icons/delete.svg') no-repeat top left; background-size: cover; }
/* play */
.fa.fa-easymusic-play { background: url('../img/icons/play.svg') no-repeat top left; background-size: cover; }
/* zakázat */
.fa.fa-easymusic-ban { background: url('../img/icons/ban.svg') no-repeat top left; background-size: cover; }
/* výpis playlistu */
.fa.fa-easymusic-listing-playlist { background: url('../img/icons/listing_playlist.svg') no-repeat top left; background-size: cover; }
/* playlisty */
.fa.fa-easymusic-playlists { background: url('../img/icons/playlists.svg') no-repeat top left; background-size: cover; }
/* výpis logů */
.fa.fa-easymusic-listing-logs { background: url('../img/icons/listing_logs.svg') no-repeat top left; background-size: cover; }
/* xls export */
.fa.fa-xls-export { background: url('../img/icons/xls-icon.png') no-repeat top left; background-size: cover; }
/* player program preview */
.fa.fa-program-preview { background: url('../img/icons/player-program-preview.png') no-repeat top left; background-size: cover; }

/* LED ICONS */
.fa.fa-easymusic-led { width: 16px; height: 16px; display: inline-block; border: solid 2px #aaaaaa; border-radius: 10px; }
.fa.fa-easymusic-led.red { background-color: red; }
.fa.fa-easymusic-led.green { background-color: green; }
.fa.fa-easymusic-led.blue { background-color: blue; }
.fa.fa-easymusic-led.orange { background-color: orange; }
.fa.fa-easymusic-led.pink { background-color: pink; }
.fa.fa-easymusic-led.yellow { background-color: yellow; }
.fa.fa-easymusic-led.black { background-color: black; }

/* tbl row for icons */
.action_icons { text-align: center; padding: 0px; }
.action_icons.s2 { width: 55px; }
.action_icons.s3 { width: 85px; }
.action_icons.s4 { width: 115px; }
.action_icons.s5 { width: 145px; }

/* tbl icons */
.action_icons .fa { margin: 2px 2px 2px 0px !important; } 
.action_icons .fa.fa-easymusic-play { width: 23px; height: 23px;  display: inline-block; line-height: 1.5em; vertical-align: middle; background: url('../img/icons/play.svg') no-repeat center left; }
.action_icons .fa.fa-easymusic-edit { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; vertical-align: middle; background: url('../img/icons/edit.svg') no-repeat top left; }
.action_icons .fa.fa-easymusic-accept { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; vertical-align: middle; background: url('../img/icons/ok.svg') no-repeat center left; }
.action_icons .fa.fa-easymusic-remove { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; vertical-align: middle; background: url('../img/icons/delete.svg') no-repeat center left; }
.fa.fa-easymusic-image-type { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; vertical-align: middle; background: url('../img/icons/image_type.svg') no-repeat center; }
.fa.fa-easymusic-video-type { width: 23px; height: 23px; display: inline-block; line-height: 1.5em; vertical-align: middle; background: url('../img/icons/video_type.svg') no-repeat center; }

/* FORM ELEMENTS ------------------------------------------------------------ */

/* default form */
form { margin: 0px; padding: 0px; }
/* pseudo */
.form { margin: 0px; padding: 0px; }

/* input elements */
.form textarea , form textarea { border: solid 2px #D1E4F1; border-radius: 8px; padding: 2px 0.75%; height: 1.5em; line-height: 1.5em; margin: 2px auto; }

.form select , form select { border: solid 2px #D1E4F1; border-radius: 8px; padding: 2px 0.5%; line-height: 1.5em; margin: 2px auto; }
.form select option , form select option { padding: 2px 0.75%; }

.form input , form input { border: solid 2px #D1E4F1; border-radius: 8px; padding: 2px 0.75%; min-height: 1.5em; line-height: 1.4em; margin: 2px auto; }
.form .value { padding: 2px 0.75%; min-height: 1.5em; line-height: 1.4em; margin: 2px auto; }
.form input[type="text"] , form input[type="text"] { color: #014A7B; }
.form input[type="password"] , form input[type="password"] { color: #014A7B; }
.form input[type="submit"] , form input[type="submit"] { color: white; font-weight: bold; background: #A6CCE5; border: none; cursor: pointer; }
.form input[type="submit"]:hover , form input[type="submit"]:hover { background-color: #014A7B; }

.form label, form label, .form .label { display: inline-block; line-height: 1.5em; border: solid 2px #D1E4F1; border-radius: 8px; padding: 2px 10px 2px 5px; margin: 2px auto; }
.form input[type="checkbox"] , form input[type="checkbox"] { display: inline-block; line-height: 1.5em; border: solid 2px #D1E4F1; vertical-align: bottom; margin: auto 5px; }
.form input[type="radio"] , form input[type="radio"] { display: inline-block; line-height: 1.5em; vertical-align: bottom; margin: auto 5px; }

.form button , form button { color: white; font-weight: bold; background: #A6CCE5; border: none; border-radius: 8px; padding: 2px 0.75%; line-height: 1.5em; margin: 2px auto; cursor: pointer; }
.form button:hover , form button:hover { background-color: #014A7B; }

/* default form children sizes */
.form .w10 , form .w10 { width: 7%; }
.form .w20 , form .w20 { width: 17%; }
.form .w30 , form .w30 { width: 27%; }
.form .w40 , form .w40 { width: 37%; }
.form .w50 , form .w50 { width: 47%; }
.form .w60 , form .w60 { width: 57%; }
.form .w70 , form .w70 { width: 67%; }
.form .w80 , form .w80 { width: 77%; }
.form .w90 , form .w90 { width: 87%; }
.form .w100 , form .w100 { width: 97%; }

.form .h2em , form .h2em { height: 2em; }
.form .h3em , form .h3em { height: 3em; }
.form .h5em , form .h5em { height: 5em; }
.form .h10em , form .h10em { height: 10em; }
.form .h15em , form .h15em { height: 15em; }
.form .h20em , form .h20em { height: 20em; }

/* fieldset styles */
.form fieldset , form fieldset { margin: 0px; padding: 0.25% 0.5%; border-style: none; border-radius: 8px; display: inline-block; }
.form fieldset.left , form fieldset.left { float: left; }
.form fieldset.right , form fieldset.right { float: right; }
.form fieldset.w10 , form fieldset.w10 { width: 9%; }
.form fieldset.w20 , form fieldset.w20 { width: 19%; }
.form fieldset.w30 , form fieldset.w30 { width: 29%; }
.form fieldset.w40 , form fieldset.w40 { width: 39%; }
.form fieldset.w50 , form fieldset.w50 { width: 49%; }
.form fieldset.w60 , form fieldset.w60 { width: 59%; }
.form fieldset.w70 , form fieldset.w70 { width: 69%; }
.form fieldset.w80 , form fieldset.w80 { width: 79%; }
.form fieldset.w90 , form fieldset.w90 { width: 89%; }
.form fieldset.w100 , form fieldset.w100 { width: 99%; }

/* HOMEPAGE ----------------------------------------------------------------- */

.HP { position: fixed; overflow: auto; display: block; width: 100%; height: 100%; margin: 0px; background-color: #F8FAF9; background-image: url('../img/img_hp_background.jpg'); background-repeat: no-repeat; background-position: center; }
.HP > .center { display: table; min-width: 320px; width: 100%; max-width: 450px; height: 100%; margin: 0px auto; background-color: white; }

/* header */

.HP > .center > header { display: table-row; height: 40%; }
.HP > .center > header figure { display: table-cell; width: 90%; margin: 0px auto; vertical-align: bottom; }
.HP > .center > header figure img { margin: 5% auto 2% auto; }
.HP > .center > header figure figcaption { margin: 2% auto 5% auto; color: #7390C5; font-size: 1.3em; }

/* content */

.HP > .center > section { display: block; vertical-align: middle; }
.HP > .center > section > .logo { display: block; width: 85%; height: 50%; margin: 10px auto; text-align: center; }
.HP > .center > section > .login { display: block; width: 85%; height: 20%; margin: 10px auto; text-align: center; }
.HP > .center > section > .links { display: block; width: 85%; height: 30%; margin: 10px auto; text-align: right; }

.HP > .center > section > .login input { margin: 8px auto; height: 2em; text-align: center; border-style: none; border-radius: 8px; }
.HP > .center > section > .login input[type="text"] { width: 100%; height: 2.4em; color: 014A7B; background: #ECF7FF; }
.HP > .center > section > .login input[type="password"] { width: 100%; height: 2.4em; color: 014A7B; background: #ECF7FF; }
.HP > .center > section > .login input[type="submit"] { width: 40%; height: 2.4em; color: white; font-weight: bold; background: #A6CCE5; border: none; }

.HP > .center > section > .links a { color: #A6CCE5; text-decoration: underline; font-style: italic; }
.HP > .center > section > .links a:hover { color: #014A7B; font-style: normal; }
.HP > .center > section > .links a:first-child { float: left; }
.HP > .center > section > .links a:last-child { }

/* footer */

.HP > .center > footer { display: table-row; vertical-align: bottom; }
.HP > .center > footer div { display: table-cell; width: 90%; margin: 0px auto; }
.HP > .center > footer div img { margin: 5% auto 0px auto; }

/* APP STYLES --------------------------------------------------------------- */

#upload_file_box { }
#upload_file_box input { width: 94%; height: 1.7em; color: white; background: #A6CCE5 !important; border: 0px solid !important; border-radius: 8px; margin-top: 2em; padding: 3px 3%; }
#upload_file_box input[type=submit], #confirm_dialog input[type=submit] { width: 150px; background-color: #A6CCE5; color: #ffffff; margin: 1em auto; height: 2.4em; text-align: center; border-style: none; border-radius: 8px; padding: 0px 1em; cursor: pointer; }
#upload_file_box input[type=submit]:hover, #confirm_dialog input[type=submit]:hover { background-color: #09629D !important; color: #ffffff; }

#upload_progress_box { display: none; margin-top: 4em; }
#upload_progress { /* ... */ }


/* MOBILE VERSION ----------------------------------------------------------- */

/*
@media screen and (max-width: 360px) { }
@media screen and (min-width: 360px) and (max-width: 640px) { }
@media screen and (min-width: 640px) and (max-width: 800px) { }
@media screen and (max-width: 900px) {
    html { width: 100% !important; }
    body { width: 100% !important; }
}
*/