﻿/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    /*border: 1px solid #b94a48;*/
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
    background-color:#ffffff;
}

.validation-summary-valid {
    display: none;
}

.hinText {
    font-size: 1em; 
    font-style: italic; 
    cursor: pointer; 
    color: #428bca;
}

/* Reskin modification some style overwrite contents in style.css */
.divmerchant {display: none;}
.UpdateClass {padding-right: 7px; cursor: pointer;}
.UpdateClassNoClick {padding-right: 20px;}
.clip {
    padding-right: 10px;
}
.clip-settings, .clip-camera, .clip-tag, .clip-bulb, .clip-paperplane, .clip-bubble, .clip-banknote, .clip-music, .clip-data, .clip-t-shirt, .clip-clip, .clip-calendar, .clip-vynil, .clip-truck, .clip-note, .clip-world, .clip-key, .clip-pencil, .clip-pencil-2, .clip-images, .clip-images-2, .clip-list, .clip-earth, .clip-pictures, .clip-cog, .clip-home, .clip-home-2, .clip-pencil-3, .clip-images-3, .clip-eyedropper, .clip-droplet, .clip-droplet-2, .clip-image, .clip-music-2, .clip-camera-2, .clip-camera-3, .clip-headphones, .clip-headphones-2, .clip-gamepad, .clip-podcast, .clip-connection, .clip-connection-2, .clip-new, .clip-book, .clip-file, .clip-file-2, .clip-file-plus, .clip-file-minus, .clip-file-check, .clip-file-remove, .clip-file-3, .clip-copy, .clip-copy-2, .clip-copy-3, .clip-copy-4, .clip-paste, .clip-stack, .clip-stack-2, .clip-folder, .clip-folder-upload, .clip-folder-download, .clip-folder-remove, .clip-folder-plus, .clip-folder-2, .clip-folder-open, .clip-cc, .clip-tag-2, .clip-barcode, .clip-cart, .clip-phone-hang-up, .clip-phone, .clip-phone-2, .clip-location, .clip-compass, .clip-map, .clip-alarm, .clip-clock, .clip-history, .clip-stopwatch, .clip-keyboard, .clip-screen, .clip-laptop, .clip-mobile, .clip-mobile-2, .clip-tablet, .clip-mobile-3, .clip-rotate, .clip-rotate-2, .clip-redo, .clip-undo, .clip-database, .clip-bubble-2, .clip-bubbles, .clip-bubble-3, .clip-bubble-4, .clip-bubble-dots, .clip-bubble-dots-2, .clip-bubbles-2, .clip-bubbles-3, .clip-user, .clip-users, .clip-user-plus, .clip-user-minus, .clip-user-cancel, .clip-user-block, .clip-user-2, .clip-user-3, .clip-users-2, .clip-user-4, .clip-user-5, .clip-hanger, .clip-quotes-left, .clip-quotes-right, .clip-busy, .clip-spinner, .clip-spinner-2, .clip-spinner-3, .clip-spinner-4, .clip-spinner-5, .clip-spinner-6, .clip-microscope, .clip-search, .clip-zoom-in, .clip-zoom-out, .clip-search-2, .clip-key-2, .clip-key-3, .clip-keyhole, .clip-wrench, .clip-wrench-2, .clip-cog-2, .clip-cogs, .clip-health, .clip-stats, .clip-inject, .clip-bars, .clip-rating, .clip-rating-2, .clip-rating-3, .clip-leaf, .clip-balance, .clip-atom, .clip-atom-2, .clip-lamp, .clip-remove, .clip-puzzle, .clip-puzzle-2, .clip-cube, .clip-cube-2, .clip-pyramid, .clip-puzzle-3, .clip-puzzle-4, .clip-clipboard, .clip-switch, .clip-list-2, .clip-list-3, .clip-list-4, .clip-list-5, .clip-list-6, .clip-grid, .clip-grid-2, .clip-grid-3, .clip-grid-4, .clip-grid-5, .clip-grid-6, .clip-menu, .clip-menu-2, .clip-circle-small, .clip-tree, .clip-menu-3, .clip-menu-4, .clip-cloud, .clip-download, .clip-upload, .clip-download-2, .clip-upload-2, .clip-globe, .clip-upload-3, .clip-download-3, .clip-earth-2, .clip-network, .clip-link, .clip-link-2, .clip-link-3, .clip-link-4, .clip-attachment, .clip-attachment-2, .clip-eye, .clip-eye-2, .clip-windy, .clip-bookmark, .clip-bookmark-2, .clip-brightness-high, .clip-brightness-medium, .clip-star, .clip-star-2, .clip-star-3, .clip-star-4, .clip-star-5, .clip-star-6, .clip-heart, .clip-thumbs-up, .clip-thumbs-up-2, .clip-cursor, .clip-stack-empty, .clip-question, .clip-notification, .clip-notification-2, .clip-question-2, .clip-plus-circle, .clip-plus-circle-2, .clip-minus-circle, .clip-minus-circle-2, .clip-info, .clip-info-2, .clip-cancel-circle, .clip-cancel-circle-2, .clip-checkmark-circle, .clip-checkmark-circle-2, .clip-close, .clip-close-2, .clip-close-3, .clip-checkmark, .clip-checkmark-2, .clip-close-4, .clip-wave, .clip-wave-2, .clip-arrow-up-left, .clip-arrow-up, .clip-arrow-up-right, .clip-arrow-right, .clip-arrow-down-right, .clip-arrow-down, .clip-arrow-down-left, .clip-arrow-left, .clip-arrow-up-left-2, .clip-arrow-up-2, .clip-arrow-up-right-2, .clip-arrow-right-2, .clip-arrow-down-right-2, .clip-arrow-down-2, .clip-arrow-down-left-2, .clip-arrow-left-2, .clip-arrow, .clip-arrow-2, .clip-arrow-3, .clip-arrow-4, .clip-arrow-up-3, .clip-arrow-right-3, .clip-arrow-down-3, .clip-arrow-left-3, .clip-checkbox-unchecked, .clip-checkbox, .clip-checkbox-checked, .clip-checkbox-unchecked-2, .clip-square, .clip-checkbox-partial, .clip-checkbox-partial-2, .clip-checkbox-checked-2, .clip-checkbox-unchecked-3, .clip-radio-checked, .clip-radio-unchecked, .clip-circle, .clip-circle-2, .clip-new-tab, .clip-popout, .clip-embed, .clip-code, .clip-seven-segment-0, .clip-seven-segment-1, .clip-seven-segment-2, .clip-seven-segment-3, .clip-seven-segment-4, .clip-seven-segment-5, .clip-seven-segment-6, .clip-seven-segment-7, .clip-seven-segment-8, .clip-seven-segment-9, .clip-share, .clip-google, .clip-google-plus, .clip-facebook, .clip-twitter, .clip-feed, .clip-youtube, .clip-youtube-2, .clip-vimeo, .clip-flickr, .clip-picassa, .clip-dribbble, .clip-forrst, .clip-deviantart, .clip-steam, .clip-github, .clip-github-2, .clip-wordpress, .clip-blogger, .clip-tumblr, .clip-yahoo, .clip-tux, .clip-apple, .clip-finder, .clip-android, .clip-windows, .clip-windows8, .clip-soundcloud, .clip-skype, .clip-reddit, .clip-linkedin, .clip-lastfm, .clip-stumbleupon, .clip-stackoverflow, .clip-pinterest, .clip-xing, .clip-foursquare, .clip-paypal, .clip-paypal-2, .clip-libreoffice, .clip-file-pdf, .clip-file-openoffice, .clip-file-word, .clip-file-excel, .clip-file-zip, .clip-file-powerpoint, .clip-file-xml, .clip-file-css, .clip-html5, .clip-css3, .clip-chrome, .clip-firefox, .clip-IE, .clip-opera, .clip-safari, .clip-IcoMoon, .clip-fullscreen-exit-alt, .clip-fullscreen, .clip-fullscreen-alt, .clip-fullscreen-exit, .clip-transfer, .clip-left-quote, .clip-right-quote, .clip-heart-2, .clip-study, .clip-wand, .clip-zoom-in-2, .clip-zoom-out-2, .clip-search-3, .clip-user-6, .clip-users-3, .clip-archive, .clip-keyboard-2, .clip-paperclip, .clip-home-3, .clip-chevron-up, .clip-chevron-right, .clip-chevron-left, .clip-chevron-down, .clip-error, .clip-add, .clip-minus, .clip-alert, .clip-pictures-2, .clip-atom-3, .clip-eyedropper-2, .clip-warning, .clip-expand, .clip-clock-2, .clip-target, .clip-loop, .clip-refresh, .clip-spin-alt, .clip-exit, .clip-enter, .clip-locked, .clip-unlocked, .clip-arrow-5, .clip-music-3, .clip-droplet-3, .clip-credit, .clip-phone-3, .clip-phone-4, .clip-map-2, .clip-clock-3, .clip-calendar-2, .clip-calendar-3, .clip-pie, .clip-airplane, .clip-tree-2, .clip-sun, .clip-bubble-paperclip, .clip-file-excel, .clip-file-pdf {
	font-family: 'clip-font';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
}
.clip-phone:before {
	content: "\e046";
}
.clip-credit:before {
	content: "\e17a";
}
.clip-banknote:before {
	content: "\e006";
}
.clip-question:before {
	content: "\e0cd";
}
.clip-cancel-circle:before {
	content: "\e0d7";
}
.clip-stack:before {
	content: "\e038";
}
.clip-file-excel:before {
	content: "\e141";
}
.clip-file-pdf:before {
	content: "\e13e";
}

#loginBox{
    margin-top: 10%;
}
#supportInfo {
    font-size: 18px;
    font-weight: bold;
    padding-top: 30px;
    text-align: center;
}
#supportInfo i {
    color: #2b2b2b;
    font-size: 16px;
    margin: 10px 10px 10px 0;
}
#supportInfo .number {
    padding-right: 20px;
    font-weight: bold;
}
#supportInfo span a {
    color: #161041;
    cursor: pointer;
    text-decoration: none;
}
#linkMenu {
    bottom: 5px;
    position: absolute;
    width: 100%;
}
#linkMenu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#linkMenu ul li {
    color: #161041;
    cursor: pointer;
    display: inline-block;
    font-size: 18px;
    padding: 10px;
    vertical-align: top;
}
#linkMenu ul li i {
    color: #2b2b2b;
    display: block;
    font-size: 60px;
    margin: 0 0 10px;
}
.btn {
    color: #fff;
    border-radius: 7px;
    box-shadow: -3px 3px 4px 2px rgba(0, 0, 0, 0.3);
}
.btn:hover,
.btn:focus {
  color: #e1e1e1 !important;
}
.dropdown-menu {
    box-shadow: -3px 3px 4px 2px rgba(0, 0, 0, 0.3) !important;
}
.skin-blue .logo {
    background: #fff;
}
.skin-blue .logo img {
    height: 72px;
}
.save-btn {
    background-color: #ea7437;
}
.save-btn:hover {
    background-color: #f89d58;
}
.disable-btn {
    background-color: #cccccc;
}
/* there are some setting for .btn-success in Reports.css that commented and overrided by settings below. */
.btn.btn-success {
    border: none;
    font-weight: normal;
    font-size: 14px !important;
    border-radius: 4px !important;
    background-color: #ea7437 !important;
}
.btn.btn-success:hover {
    background-color: #f89d58 !important;
}
.btn.dropdown-toggle.btn-default{
    color: #333 !important;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border-radius: 0px !important;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
.btn.dropdown-toggle.btn-default:focus,
.btn.dropdown-toggle.btn-default:hover{
    color: #333 !important;
    background-color: #FFFFFF !important;
    border: 1px solid #cccccc;
}
.btn.dropdown-toggle.btn-default:focus
{
    border-color: #66afe9;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
    outline: 0 none;
}
.bodyblue {
    background-color: #FFFFFF;
}
.login-box {
    width: 350px;
    background: #fbfcfe;
    border: 2px solid #f5f5f5;
    margin-top: 0px;
    padding: 15px 30px;
    border-radius: 15px;
    box-shadow: -10px 10px 10px rgba(0, 0, 0, 0.32);
}
.login-header {
    color: #2b2b2b;
    margin-bottom: 0px;
    display: none;
}
.bodyblue .cliqlogo {
    width: 330px;
    margin-left: auto;
    margin-right: auto;
}
.bodyblue .cliqlogo img{
}
.login-box p {
    color: #2b2b2b;
    text-align: center;
    margin-bottom: 10px;
}
.login-box .form-group {
    margin-bottom: 5px;
}
.login-box .form-group label {
    font-size: 14px;
    white-space: nowrap;
    margin-bottom: 0px;
    width: 85px;
    text-align: right;
    padding-right: 7px;
    display: table-cell;
    vertical-align: middle;
}
.login-box.change-form{
    padding: 15px;
}
.login-box.change-form .form-group{
    font-size: 13px;
}
.login-box.change-form .form-group label {
    width: 125px;
}
.login-box .form-control {    
    color: #111111;
    font-size: 14px;
    border: 1px solid #cccccc;
    margin-bottom: 0px;
    height: 25px;
    line-height: 1;
    padding: 5px 10px;
    border-radius: 5px !important;
}
.login-box .form-control:focus {
    color: #161041;
    border-color: #66afe9;
    box-shadow: 0 0 3px rgba(102, 175, 233, 0.6);
}
.login-box.twofactor-phone{
    width: 400px;
}
.login-box.twofactor-phone .input-group, .login-box.twofactor-code .input-group{
    width: 90%;
}
.login-box.twofactor-phone .pull-right, .login-box.twofactor-code .pull-right{
    margin: 10px 15px;
}
.login-box.twofactor-phone .pull-Left, .login-box.twofactor-code .pull-Left{
    margin: 10px;
}
.login-box.twofactor-phone .checkbox , .login-box.twofactor-code .checkbox {
    margin: 5px 5px 5px 60px
}
.login-box.twofactor-phone .form-group, .login-box.twofactor-code .form-group{
    font-size: 14px;
}
.login-box.twofactor-code{
    width: 480px;
}
.login-box.twofactor-code li{
    margin: 7px 0px 7px 15px;
    padding-left: 5px;
}
.login-box.twofactor-code .form-group label  {
    font-size: 16px;
    width: 150px;
}
.login-box.twofactor-phone .form-group label {
    font-size: 16px;
}
.login-box.twofactor-code .form-group label.txtMsg  {
    width: 200px;
}

.forgot-password-link a {
    color: #161041;
}
.forgot-password-link a:hover {
    color: #423b60;
    text-decoration: none;
}
.login-btn {
    background-color: #ea7437;
    width: 120px;
    font-size: 14px;
    margin: 5px auto 0px;
}
.login-btn:hover,
.login-btn:focus {
    color: #f89d58;
}
.hvr-sweep-to-right:before {
    background: #f89d58;
    border-radius: 7px;
}
.background-active {
    background: #6dcde3;
}
.header .logo {
    padding-right: 0px;
}
body.skin-blue{
    min-height: 980px;
}
.skin-blue .sidebar .user-panel,
.sidebar .sidebar-menu > li > a,
.sidebar .sidebar-menu .treeview-menu > li > a,
.right-side > .content-header > .breadcrumb {
    padding-left: 10px;
}
.skin-blue .treeview-menu > li i {
    margin-right: 0;
}
.skin-blue .sidebar .user-panel {
    background-color: #161041;
    background-image: url("/images/CliqPortalMark.png");
    background-position: 8px 12px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    padding-left: 35px;
}
.skin-blue .left-side,
.skin-blue .right-side > .content-header,
.skin-blue .sidebar > .sidebar-menu > li > .treeview-menu {
    background: #161041;
}
.skin-blue .navbar .sidebar-toggle .icon-bar {
    background: #161041;
}
.skin-blue .navbar .sidebar-toggle:hover .icon-bar {
    background: #161041;
}
.skin-blue .right-side > .content-header > .breadcrumb > li > a {
    color: #5c94e8;
}
.skin-blue .navbar .nav > li > a:hover, .skin-blue .navbar .nav > li > a:active, .skin-blue .navbar .nav > li > a:focus, .skin-blue .navbar .nav .open > a, .skin-blue .navbar .nav .open > a:hover, .skin-blue .navbar .nav .open > a:focus {
    color: #161041;
}
.skin-blue .navbar .dropdown-menu > li > a:hover, .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background: #6dcde3;
}
.skin-blue .user-menu a {
    color: #161041;
}
.skin-blue .sidebar > .sidebar-menu > li {
    border-bottom: none;
}
.form-check {
    padding-top: 5px;
}
.group-header {
    background-color: #39c2b3;
}
.group-header label {
    color: #fff;
}
#frmUpdateBank .form-group label, #frmAddBank .form-group label {
    white-space: nowrap;
}
table.grid-table > thead > tr > th, table.table-bordered > thead > tr > th {
    color: #161041;
    background: #ffffff;
}
table.grid-table > thead > tr > th a, table.table-bordered > thead > tr > th a {
    color: #161041;
}
.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
    background-color: #eef2f7;
}
table.grid-table tr.grid-row-selected td {
    background: #6dcde3;
}
table.grid-table tfoot td {
    font-weight: bold;
    border: 1px solid #ddd;
}
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: #ea7437;
}
.pagination > li > a:hover, .pagination > li > a:focus {
    background: #f89d58;
}

.ui-widget-header {
    background: #423b60 ;
}
/*.fa, i[class^="clip-"] {
    color: #ea7437;
}*/
#popup_container {
    border: 5px solid #423b60;
}
#popuptitle_container {
    background-color: #161041;
}
#popup_panel input[type=button] {
    background: #ea7437; color: #ffffff; border-radius: 5px; font-weight: bold; padding: 5px 15px;
}
#SummaryContainer h3 {
    color: #111111;
}
.form-group label {
    color: #111111;
}    
    
/*Custom merchant dropdown list*/
.navbar-right.filterAdm, .navbar-right.filterM, .navbar-right.filterIcon {margin-top: 10px;}
.navbar-right.filterM, .navbar-right.filterIcon  {display: none;}
.navbar-right .fa-search {position: relative; top: 10px; right: 20px; font-size: 27px; cursor: pointer; color: #161041;}
.navbar-right .fa-search:hover {color: none;}
.navbar-right .fa-search .navbar-filter {font-size: 14px; font-weight: bold; position: relative; padding: 0px 5px; bottom: 5px;}
.navbar-right .merchantLabel {position: relative; top: 13px; right: 35px; font-weight: bold;}
.navbar-right .merchantFilter {position: relative; top: 5px; right: 30px;}
.limitWidth {max-width: 130px;}
/* Sale/Credit Response popup */
.printButton {position: absolute; left: 20px !important;}
.emailButton {position: absolute; left: 145px;}
.sendButton {position: absolute; left: 145px; display: none;}
.emailErr {display: none; padding-top: 5px; padding-left: 120px; font-size: 12px;}
#emailReceipt {padding: 10px;  background-color:rgba(246, 252, 253, 0.82);}
#voidRefundResponseTable {min-width: 325px; background-color:rgba(246, 252, 253, 0.82);}
#modalResponseContainer + .ui-dialog-buttonpane button span {padding: 0.4em 0.56em;}

input[type=number].no-spinner::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none; 
     margin: 0; 
}
.form-group .multiList {
    min-height: 250px;
    max-height: 350px; 
    overflow: auto;
    padding-left: 3px;
}

/* My Residual stuff*/
#myResidual #ReportContainer, #myResidual #DetailContainer {
    min-height: 320px;
}
#myResidual .subBtn {
    width: 150px;
}
#myResidual .btn-success{
    width:  100%;
}
#myResidual .expBtn {
    float: right;
    width: 220px;
}
#myResidual .expBtn button {
    width: 175px;
}
#myResidual button i {
    float: left;
    margin-top: 3px;
}
#myResidual #btnBackToResList {
    min-width: 220px;
}
#myResidual #btnDownloadstm {
    min-width: 180px;
    margin-left: 50px;
}
#myResidual #instructionContainer{
    margin-bottom: 10px;
}
#myResidual .merRes .form-group {
    margin-top: 0px;
    margin-bottom: 0px;
}
#myResidual #IdTypeContainer button{
    float: right;
}



@media all and (max-width:500px) {
    #supportInfo i {
        display: inline-block;
        margin: 5px 10px 5px 0;
    }
	#supportInfo span {
        display: inline-block;
	}
    #linkMenu {
        display: none;
    }
    .bodyblue .cliqlogo {
        width: 260px;
    }
    .bodyblue .cliqlogo img {
        margin-left: -7px;
    }
    .login-box p {
        margin: 5px 0px;
    }
    @media all and (max-width:320px){
        .login-box p {
            margin: 5px -10px;
        }
    }
}
@media all and (max-height:800px) {
    #loginBox {
        margin-top: 20px;
    }
}
@media all and (max-height:680px) {
    #loginBox {
        margin-top: 10px;
    }
}
@media all and (max-height:570px) {    
    #linkMenu {
        display: none;
    }
}
@media all and (max-height:500px){
	.bodyblue .cliqlogo {
        width: 200px;
    }
    .login-box {
        padding: 15px;
    }
    .login-box p {
        margin: 5px;
    }
    #supportInfo {
        padding-top: 20px;
    }
    #loginBox {
        margin-top: 20px;
    }
    @media all and (max-height:400px){
        .login-box {
            padding: 15px;
        }
        .login-box p {
            margin: 5px 10px;
        }
	    .bodyblue .cliqlogo {
            display: none;
        }
        #loginBox {
            margin-top: 15px;
        }
    }
}
