/********************************************************
Extend Bootstrap
********************************************************/
body { font-family: 'Open Sans', sans-serif; }
    body .no-resize { resize: none; }
    body .no-visible { visibility:hidden; }
    body .wrapper { display: block; margin: auto; }

.btn { background-color: #8e44ad; color: #FFF; }
    .btn:hover { background-color: #3498db; color: #FFF; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; -webkit-transition: all 1s ease 0s; transition: all 1s ease 0s; }
    .btn > i.glyphicon { color: #FFF; margin-right: 10px; }
    .btn.btn-green { background-color: #27ae60; }
        .btn.btn-green:hover { background-color: #3498db; }
    .btn.btn-orange { background-color: #f39c12; }
        .btn.btn-orange:hover { background-color: #27ae60; }
    .btn.btn-red { background-color: #c0392b; }
        .btn.btn-red:hover { background-color: #3498db; }
    .btn.btn-blue { background-color: #3498db; }
        .btn.btn-blue:hover { background-color: #27ae60; }
    .btn.btn-icon > i.glyphicon { margin: 0; }

body .form-group-address { }
    body .form-group-address input[type="text"] { margin-bottom: 5px; }
body .form-group-icon { position: relative; display: block; }
    body .form-group-icon > i.glyphicon { position: absolute; right: 10px; top: 0; bottom: 0; margin: auto; line-height: 34px; }
    body .form-group-icon > input[type="text"], body .form-group-icon > input[type="password"] { padding-right: 30px; }
body .form-group .input-append { position: relative; }
    body .form-group .input-append .add-on { position: absolute; top: 0; left: 0; width: 30px; text-align: center; height: 34px; min-width: 16px; padding: 0; font-size: 14px; font-weight: normal; line-height: 34px; -webkit-text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff; background-color: #eeeeee; border: 1px solid #ccc; border-top-left-radius: 4px; border-bottom-right-radius: 4px; }
    body .form-group .input-append input { padding-left: 40px; }
body .form-group .color-picker { height: 28px; }
body .select2-container .select2-choice { height: 34px; line-height: 34px; }
body .select2-container.form-control { padding: 0; border: 0; }

body .relative { position: relative; }
body input.error, body textarea.error, body select.error { border-color: #B94A48; color: #A60D10; }
    body input.error:focus, body textarea.error:focus, body select.error:focus { border-color: #B94A48; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 0 0 2px rgba(185, 74, 72, 0.3); }

body .status.error { color: #a94442; }
body .status.success { color: #3c763d; }

body .push-center { text-align: center; }
body .dropdown-menu a { color: #7f8c8d; }
body ._no-resize { resize: none; }
body .nav > li.disabled { display: none; }
body .table td { vertical-align: middle; }
body .modal-dialog { background:#FFF; }

/********************************************************
ZCmsLogin
********************************************************/
#ZCmsLogin { padding: 0 10px; padding-top: 10px; max-width: 280px; margin: auto; }
    #ZCmsLogin .zcms-header { position: relative; border-bottom: 1px dotted #ccc; height: 60px; margin-bottom: 10px; }
        #ZCmsLogin .zcms-header .logo { position: absolute; top: 5px; right: 0; width: 50px; height: 60px; background: url(../img/sprites.png) 0 0 no-repeat; }
    #ZCmsLogin h1, #ZCmsLogin h6 { margin-top: 0; margin-bottom: 0; }
    #ZCmsLogin .zcms-body { }
    #ZCmsLogin .zcms-actions { }
        #ZCmsLogin .zcms-actions .status { width: 120px; vertical-align: middle; }

/********************************************************
ZcmsBody
********************************************************/
#ZcmsBody { display: block; padding-bottom: 50px; }
    #ZcmsBody .navbar { background-color: #2c3e50; height: 52px; margin-bottom: 0; }
        #ZcmsBody .navbar a { color: #FFF; }
            #ZcmsBody .navbar a:hover { background-color: #7f8c8d; }
            #ZcmsBody .navbar a > i.glyphicon { margin-right: 7px; }
        #ZcmsBody .navbar .dropdown-menu a { color: #34495e; }
            #ZcmsBody .navbar .dropdown-menu a:hover { color: #FFF; background-color: #3498db; }
        #ZcmsBody .navbar .btn { border-bottom-left-radius: 0; border-top-left-radius: 0; }
            #ZcmsBody .navbar .btn .glyphicon { margin-right: 10px; }
    #ZcmsBody .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #000; }
#ZcmsPage { display: block; overflow-x: hidden; }
    #ZcmsPage .breadcrumb { margin-bottom: 10px; }
    #ZcmsPage .zcms-content { display: block; margin: 0px 15px; }
    #ZcmsPage .no-results { text-align: center; font-style: italic; }
    #ZcmsPage .table-list { }
        #ZcmsPage .table-list .col-action { width: 57px; }
            #ZcmsPage .table-list .col-action i.glyphicon { margin: 0; }
        #ZcmsPage .table-list td { vertical-align: middle; }
        #ZcmsPage .table-list .form-group { margin-bottom: 0 !important; }
    #ZcmsPage .nav-tabs { margin-bottom: 5px; }
    #ZcmsPage .upload-photos { position: relative; margin-bottom: 20px; text-align: center; margin-top: 10px; }
        #ZcmsPage .upload-photos .help-block { position: absolute; right: 0; top: 5px; width: 385px; font-style: italic; margin: 0; padding: 0; }
        #ZcmsPage .upload-photos .badge { position: absolute; top: 6px; left: 150px; }
    #ZcmsPage .pagination { margin: 0; padding: 0; }
#ZCmsSearchForm { width: 250px; position: relative; margin-top: 6px; }
    #ZCmsSearchForm button { position: absolute; top: 0; right: 0; height: 25px; width: 30px; }
        #ZCmsSearchForm button i.glyphicon { margin: 0; position: absolute; top: 5px; right: 8px; }
    #ZCmsSearchForm input { padding-right: 40px; height: 25px; line-height: normal; }
#ZcmsFooter { height: 50px; line-height: 50px; position: fixed; bottom: 0; left: 0; width: 100%; background-color: #ecf0f1; z-index: 10; }
    #ZcmsFooter.error { background-color: #f2dede; }
    #ZcmsFooter.success { background-color: #dff0d8; }
    #ZcmsFooter .wrapper { position: relative; }
    #ZcmsFooter a, #ZcmsFooter button { margin-left: 10px; }
    #ZcmsFooter .status { position: absolute; line-height: 50px; text-align: center; left: 0; width: 100%; z-index: -1; }
    #ZcmsFooter .pull-right { margin-top: 9px; }

#photosList { background-image: none; list-style-image: none; margin-left: 0; padding-left: 0; }
    #photosList li { position: relative; display: inline-block; width: 23%; margin: 1%; float: left; }
        #photosList li .handle { cursor: move; width: 33px; position: absolute; top: -10px; left: -10px; }
        #photosList li .thumbnail { margin-bottom: 0; }

#MediaLibraryPage { padding: 0 20px; }
    #MediaLibraryPage .tab-content { margin-top: 20px; }
        #MediaLibraryPage .tab-content .actions { text-align: center; margin-bottom: 10px; }
            #MediaLibraryPage .tab-content .actions label { margin: 0 10px; cursor: pointer; }
    #MediaLibraryPage .photo { margin: 15px 0; position: relative; }
        #MediaLibraryPage .photo > input[type=checkbox] { position: absolute; visibility: hidden; left: -30px; }
        #MediaLibraryPage .photo img { max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; margin-top:-2px; }
        #MediaLibraryPage .photo.selected img { border-color: #428bca; }
        #MediaLibraryPage .photo .input-check { z-index: 10; position: absolute; display:block; top: 0; right: 0; bottom:0; left:0;  }
        #MediaLibraryPage .photo .input-icon { z-index: 10; position: absolute; display:block; top: 0; right: 0; bottom:0; left:0; margin:auto; width: 35px; height: 35px; line-height: 35px; border: 2px solid #ddd; background-color: #FFF; border-radius: 25px; }
            #MediaLibraryPage .photo .input-check:hover { text-decoration: none; }
        #MediaLibraryPage .photo.selected .input-icon { background: #428bca; color:#FFF !important; }
             #MediaLibraryPage .photo.selected .input-icon .glyphicon { color:#FFF !important; display:block }
        #MediaLibraryPage .photo.selected .relative { border-color: #428bca; box-shadow:0 0 8px 2px #428bca; }
        #MediaLibraryPage .photo .input-check .glyphicon { display: none; line-height: 29px; text-align: center; margin: 0; padding: 0; width: 100%; }
        #MediaLibraryPage .photo .input-check:hover .glyphicon { display: block; color: #000; }
        #MediaLibraryPage .photo .relative { text-align:center; position: relative; height: 115px; line-height: 113px; border:1px solid #ccc; }
        #MediaLibraryPage .photo .photo-back { display: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; opacity: 0.3; filter: alpha(opacity=30); z-index: 1; }
        #MediaLibraryPage .photo .photo-big { font-size: 1.1em; display: none; position: absolute; margin: auto; top: -12px; right: -2px; width: 35px; height: 35px; line-height: 35px; background-color: #3498db; border-radius: 35px; text-align: center; color: #FFF; z-index: 100; }
        #MediaLibraryPage .photo .photo-delete { cursor: pointer; font-size: 1.1em; display: none; position: absolute; margin: auto; top: -12px; left: -2px; width: 35px; height: 35px; line-height: 35px; background-color: #c0392b; border-radius: 35px; text-align: center; color: #FFF; z-index: 100; }
        #MediaLibraryPage .photo:hover .photo-back, #MediaLibraryPage .photo:hover .photo-big, #MediaLibraryPage .photo:hover .photo-delete { display: block; }
        #MediaLibraryPage .photo .photo-name { margin-top:5px; height: 40px; overflow: hidden; }
        #MediaLibraryPage .photo-new .relative,#MediaLibraryPage .folder-new .relative { border:2px solid #27ae60 !important; }
        #MediaLibraryPage .photo-new:hover img { opacity:0.7; filter:alpha(opacity=70); }
        #MediaLibraryPage .photo-new .photo-icon { font-size: 1.1em; display: inline-block; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 35px; height: 35px; line-height: 35px; background-color: #FFF; border-radius: 35px; text-align: center; color: #B6C23A; z-index: 2; }
        #MediaLibraryPage .photo.photo-blocked .input-check { display:none !important; }
    #MediaLibraryPage .folder { cursor:pointer; margin: 15px 0; position: relative; }
        #MediaLibraryPage .folder .relative { text-align:center; position: relative; height: 115px; line-height: 111px; border:1px solid #ccc; }
        #MediaLibraryPage .folder .folder-delete { cursor: pointer; font-size: 1.1em; display: none; position: absolute; margin: auto; top: -12px; left: -2px; width: 35px; height: 35px; line-height: 35px; background-color: #c0392b; border-radius: 35px; text-align: center; color: #FFF; z-index: 100; }
        #MediaLibraryPage .folder img {  max-width: 100%; max-height: 100%; display: inline-block; vertical-align: middle; }
        #MediaLibraryPage .folder:hover .folder-delete { display:inline-block; }
        #MediaLibraryPage .folder:hover img { opacity:0.7; filter:alpha(opacity=70); }
        #MediaLibraryPage .folder .folder-icon { font-size: 1.1em; display: none; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; width: 35px; height: 35px; line-height: 35px; background-color: #FFF; border-radius: 35px; text-align: center; color: #B6C23A; z-index: 2; }
        #MediaLibraryPage .folder.folder-new .folder-icon { display:inline-block; }
    #MediaLibraryPage .tab-content .actions .push-left { position: absolute; left: 0; top: 0; }
        #MediaLibraryPage .tab-content .actions .push-left > * { display: inline-block; vertical-align: middle; margin-right: 5px; }
    #MediaLibraryPage .tab-content .actions input[type="text"] { width: 150px; }
    #MediaLibraryPage .btn-search { border:0; margin-top:24px; }
        #MediaLibraryPage .btn-search i { margin:0 !important; } 

#PhotosDetail { }
#ResetPhotoEffectsBtn { display: block; text-align: center; margin-bottom: 10px; }
#PhotosDetail span[class*=col-] { margin-right: 0px; }
#PhotosDetail .single-range { margin-top: 10px; margin-bottom: 10px; }

/********************************************************
Titles
********************************************************/
.tile { display: block; float: left; width: 100%; height: 100%; cursor: pointer; margin: 0; margin-top: 15px; overflow: hidden; -webkit-transition: background; -moz-transition: background; -o-transition: background; transition: background; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; text-decoration: none !important; outline: transparent solid 3px; position: relative; border-radius: 4px; }
    .tile:before,
    .tile:after { content: " "; display: table; }
    .tile:after { clear: both; }
    .tile.white { background-color: #ffffff; color: #768399; }
        .tile.white:hover { background-color: #fcfcfc; }
    .tile.blue { background-color: #75b9e6; color: #ffffff; }
        .tile.blue:hover { background-color: #4aa3de; }
    .tile.red { background-color: #f68484; color: #ffffff; }
        .tile.red:hover { background-color: #f35454; }
    .tile.green { background-color: #71d398; color: #ffffff; }
        .tile.green:hover { background-color: #4ac77c; }
    .tile.yellow { background-color: #ffcc66; color: #ffffff; }
        .tile.yellow:hover { background-color: #ffbb33; }
    .tile.orange { background-color: #f4b162; color: #ffffff; }
        .tile.orange:hover { background-color: #f19932; }
    .tile.purple { background-color: #af91e1; color: #ffffff; }
        .tile.purple:hover { background-color: #9269d6; }
    .tile.pink { background-color: #f78db8; color: #ffffff; }
        .tile.pink:hover { background-color: #f45d9a; }
    .tile.lime { background-color: #a8db43; color: #ffffff; }
        .tile.lime:hover { background-color: #90c526; }
    .tile.magenta { background-color: #e65097; color: #ffffff; }
        .tile.magenta:hover { background-color: #e0237c; }
    .tile.teal { background-color: #97d3c5; color: #ffffff; }
        .tile.teal:hover { background-color: #73c4b1; }
    .tile.brown { background-color: #d1b993; color: #ffffff; }
        .tile.brown:hover { background-color: #c2a26f; }
    .tile.gray-spr { background-color: #f3f5f6; }
        .tile.gray-spr:hover { background-color: #d6dde0; }
    .tile.dark { color: #ffffff; background-color: #79859b; }
        .tile.dark:hover { background-color: #606c81; }
    .tile .tile-content { width: 100%; height: 100%; position: relative; padding: 15px; }
        .tile .tile-content.text-center .number,
        .tile .tile-content.text-center h3 { margin-left: 0; ]; }
        .tile .tile-content .label { color: #768399; font-size: 100%; width: 100%; float: left; margin-bottom: 10px; }
        .tile .tile-content .spark-number { width: 100%; float: left; font-size: 24px; margin-bottom: 10px; }
        .tile .tile-content .spark .percent { float: left; font-size: 16px; width: 60%; }
        .tile .tile-content .spark .sparkline { width: 40%; display: inline-block; }
        .tile .tile-content .number { font-size: 40px; line-height: 40px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); }
        .tile .tile-content h1,
        .tile .tile-content h2,
        .tile .tile-content h3,
        .tile .tile-content h4,
        .tile .tile-content h5,
        .tile .tile-content h6 { font-size: 14px; font-weight: normal; }
        .tile .tile-content h1,
        .tile .tile-content h2,
        .tile .tile-content h3,
        .tile .tile-content h4,
        .tile .tile-content h5,
        .tile .tile-content h6,
        .tile .tile-content p { padding: 0; margin: 10px 0 0 10px; line-height: 18px; }
    .tile .tile-icon { float: right; right: 10px; position: absolute; top: 50%; margin-top: -4px; font-size: 40px; }
        .tile .tile-icon i { text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); }