@charset "utf-8";

body {background: #eff3f8; font-family: Arial; color: black; font-size: 14px;}
body a {display: inline-block; color: #444d58;}

.alertRed:before {content: ''; position: absolute; border-radius: 100%; width: 8px; height: 8px; background: #bb8f8f; margin-top: 4px; margin-left: -15px;}
.alertGreen:before {content: ''; position: absolute; border-radius: 100%; width: 8px; height: 8px; background: #99bb8f; margin-top: 4px; margin-left: -15px;}

.lightButton {background: #fff; color: #444d58;}
.darkButton {background: #505b69; color: #eff3f8;}
.grayButton {background: #ccc; color: #fff;}

.button {border: 0; margin: 0; cursor: pointer; padding: 5px 15px; font-weight: bold; display: inline-block; float: left; margin-right: 15px; border-radius: 5px; box-shadow: 0 1px 0 rgba(0,0,0, 0.3);}
.inputTx {border: 1px solid #ddd;; padding: 5px 15px; border-radius: 5px; box-shadow: 0 1px 0 rgba(0,0,0, 0.05);}
.inputTx.inputSmall {max-width: 70px;}
.inputTx option {padding: 0 10px;}

*:after, *:before {font-family: FontAwesome, Arial;}

.title {font-size: 24px; margin: 20px 0;}

.headerTop {background: #fff; padding: 20px 30px!important; height: 120px; box-shadow: 0 0 10px rgba(0,0,0, 0.1); overflow: hidden;}
.headerTop .logo {width: 210px; margin-top: 1vh; position: relative;}
.headerTop .logo img {width: 100%;}
.headerTop .logo:after {content: 'Teminat Sistemi'; position: absolute; bottom: -10px; right: 0; color: #999;}

.headerTop .headerRight {float: right;}
.headerTop .headerRight .topMenu {display: inline-block;}
.headerTop .headerRight .topMenu li {float: left; padding-right: 20px; margin-right: 20px; position: relative; border-right: 1px dotted #ccc;}
.headerTop .headerRight .topMenu li:last-child {border-right: none;}
.headerTop .headerRight .topMenu li a {font-size: 12px; border-bottom: 1px solid #fff;}
.headerTop .headerRight .topMenu li a i {background-image: url(../img/icons.jpg); width: 18px; height: 18px; display: inline-block;float: left; margin-right: 5px;}
.headerTop .headerRight .topMenu li a i.icon-user {background-position: top;}
.headerTop .headerRight .topMenu li a i.icon-lock {background-position: center;}
.headerTop .headerRight .topMenu li a i.icon-logout {background-position: bottom;}
.headerTop .headerRight .topMenu li a:hover {border-bottom: 1px solid #ccc;}

.leftSide {background: #444d58; color: #fff; position: absolute; top: 120px; left: 0; bottom: 0;}
.leftSide ul {padding: 20px 0; border-top: 1px solid #505b69; border-bottom: 1px solid #3b444e;}
.leftSide ul li a {color: #bfcbdb; padding: 6px 2px 6px 2px; display: block; border-radius: 3px; position: relative; }
.leftSide ul li a:hover {background: #505b69;margin-left:1px;}
.leftSide ul li span {float: right;}

.leftSide ul.userMenu {border-bottom: none!important;}
.leftSide ul.userMenu li a {font-size: 12px;}

.leftSide ul.stats {background: #505b69; display: inline-block; width: 100%; border-radius: 5px; border: none!important; padding: 0!important;}
.leftSide ul.stats li {padding: 10px 20px; font-size: 12px; border-bottom: 1px solid #444d58;}
.leftSide ul.stats li:last-child {border: none;}

.content {padding: 0 20px; overflow: hidden; position: absolute; top: 120px; right: 0; bottom: 0;}
.content .contentCover {background: #fff; border-radius: 10px; height: 700px; overflow: auto;}

.content .contentCover .contentBox {position: relative;}
.content .contentCover .contentBox p {margin-bottom: 30px;}



.contentTable .tableTop, .buttonGroup {background: #444d58; color: #bfcbdb; font-weight: 700;}
.buttonGroup {padding: 15px;}

.searchContent .formList {display: inline-block; margin: 20px; font-size: 12px;}
.searchContent .formList li {float: left; padding: 5px 10px;}
.searchContent .formList li p {display: inline-block; font-weight: bold;}

.fileContent {padding: 0; box-shadow: 0 0 30px rgba(0,0,0, 0.2); overflow: hidden; width: 0; height: 0; opacity: 0;}
.fileContentActive {padding: 20px; width: 50%; height: auto; opacity: 1;}

.fileContent .inputFile {display: none;}
.fileContent .fileLabel {width: 100%; border: 1px solid #ddd; display: inline-block; padding: 20px; margin-bottom: 20px; border-radius: 10px;}
.fileContent .fileLabel p {display: inline-block; float: left; color: #999; font-size: 18px; margin: 0!important;}
.fileContent .fileLabel p i {font-size: 40px; vertical-align: middle; color: #f1f1f1; line-height: 24px;}
.fileContent .fileLabel .button {float: right; margin: 0;}
.fileContent .fileCover {margin-top: 20px; padding: 10px; border: 1px solid #ddd; width: 100%; border-radius: 10px; overflow: hidden; position: relative; min-height: 400px;}
.fileContent .fileCover .imgBox:after {content: '\f0f6'; position: absolute; top: 0; right: 0; bottom: 0; left: 0; font-size: 250px; text-align: center; padding-top: 50px; color: #f1f1f1; z-index: 0;}
.fileContent .fileCover .imgBox img {width: 100%; position: relative; z-index: 2;}
.fileContent .fileCover .imgBox .closeImg {opacity: 0;}
.fileContent .fileCover .imgBoxActive {position: fixed; top: 0; right: 0; left: 0; bottom: 0; text-align: center; background: rgba(0,0,0, 0.9); padding: 50px; z-index: 5;}
.fileContent .fileCover .imgBoxActive img {width: auto; height: 100%;}
.fileContent .fileCover .imgBoxActive .closeImg {opacity: 1;}
.fileContent .fileCover .button {bottom: 20px; right: 20px; position: absolute; margin: 0; z-index: 3;}
.fileContent .notif { width: 100%; border-top: 1px solid #ddd; margin-top: 20px; padding: 20px;}

.loginForm {background: #fff; border-radius: 10px; overflow: hidden; padding: 0;}
.loginForm .formList {display: inline-block; width: 100%; margin-bottom: 20px;}
.loginForm .formList li {padding: 20px;}
.loginForm .formList li p {text-align: right; padding: 3px 10px;}

.logoContent {text-align: center; padding: 30px; margin-top: 150px;}
.logoContent .logo {max-width: 150px; min-width:150px;   position: relative;}
.logoContent .logo img {width: 150px;}
.logoContent .logo:after {content: 'Teminat Sistemi'; position: absolute; bottom: -10px; right: 0; color: #999;}