/** * WHMCS Main Style Sheet * * Additional styles for WHMCS beyond Bootstrap * * This stylesheet contains all the customized styling used * by WHMCS. Overrides to Bootstrap styles can be found in * overrides.css. * * @project WHMCS * @cssdoc version 1.0-pre * @package WHMCS * @author WHMCS Limited * @copyright Copyright (c) WHMCS Limited 2005-2015 * @license http://www.whmcs.com/license/ * @link http://www.whmcs.com/ */ html,body { height: 100%; } a { color: #058; } /** * ------------------------- * @section Sections * ------------------------- */ section#header { margin: 0; padding: 10px 0; background: #fff; border-radius: 5px 5px 0 0; } section#main-body { margin-top: 20px; margin-bottom: 20px; min-height: 350px; } .cartphp.promo_CIRACA99FEB section#main-body, .cartphp.promo_CIRACA99 section#main-body, .cartphp.promo_CA88DEC section#main-body, .cartphp.promo_CA88DECcira section#main-body, .cartphp.promo_CA1DOLLAR section#main-body { margin-top: -230px; } section#main-content { margin-bottom: 60px; } .main-content { margin-bottom: 60px; min-height: 300px; } section#footer p { margin: 25px 0 0 0; border-top: 20px solid #006687; line-height: 40px; color: #666; font-size: 0.7em; text-align: center; } .adminreturndiv { display: none !important; } /** * ------------------------- * @section General Styles * ------------------------- */ div.header-lined h1 { margin-top: 0; margin-bottom: 15px; padding:6px 0; border-bottom:1px solid #ccc; font-weight: 400; color: #058; } div.header-lined .breadcrumb { margin-top: -15px; font-size: 0.7em; border-radius: 0 0 4px 4px; } div.header-lined small { white-space: nowrap; overflow: hidden; } @media (max-width: 600px) { h1,.h1{font-size:26px} h2,.h2{font-size:20px} h3,.h3{font-size:16px} h4,.h4{font-size:14px} h5,.h5{font-size:12px} h6,.h6{font-size:11px} div.header-lined small { display: none; } } @media (min-width: 380px) { .btn-input-padded-responsive { padding-left: 20px; padding-right: 20px; } } @media (min-width: 500px) { .btn-input-padded-responsive { padding-left: 35px; padding-right: 35px; } } .compact-control-bar { margin: 0; padding: 5px; background-color: #eee; border-radius: 3px; } /** * ------------------------- * @section Margin Classes * ------------------------- */ .margin-10 { margin: 10px; } .margin-bottom { margin-bottom: 20px; } .margin-top-5 { margin-top: 5px; } .margin-bottom-5 { margin-bottom: 5px; } .col-button-left { padding-left: 0; padding-right: 7px; } .col-button-right { padding-left: 7px; padding-right: 0; } /** * ------------------------- * @section Form Classes * ------------------------- */ .input-inline { display: inline-block; } .input-inline-100 { width: 100px; } .select-inline { display: inline-block; width: auto; } /** * ------------------------- * @section Responsive Pull Left & Right * ------------------------- */ @media (min-width: 992px) { .pull-md-left { float: left; } .pull-md-right { float: right; } } @media (min-width: 768px) { .pull-sm-left { float: left; } .pull-sm-right { float: right; } .text-right-sm { text-align: right; } } /** * ------------------------- * @section Login Page * ------------------------- */ .logincontainer { margin: 40px auto 100px auto; padding: 0 10px; max-width: 500px; } @media (max-width: 600px) { .logincontainer { margin: 0 auto 30px auto; } } /** * ------------------------- * @section Icons * ------------------------- */ i.icon-rss { color: #ff6600; } /** * ------------------------- * @section Main Menu * ------------------------- */ section#main-menu { background-color: #006687; } /** * ------------------------- * @section Home Page Banner * ------------------------- */ section#home-banner { margin: 0; padding: 50px 0 60px; background-color: #2E363F; color: #fff; } section#home-banner h2 { margin: 0; padding: 0 25px 10px 25px; } @media (max-width: 992px) { section#home-banner h2 { font-size: 26px; } } @media (max-width: 768px) { section#home-banner h2 { font-size: 22px; } } /** * ------------------------- * @section Home Page Shortcut Buttons * ------------------------- */ .home-shortcuts { margin: 0; background: #15A4D3; color: #fff; } .home-shortcuts ul { list-style-type: none; margin: 0; padding: 0; } .home-shortcuts li { float: left; width: 24%; padding: 5px 3px; border-right: 1px solid #0E88B0; font-size: 0.9em; text-align: center; cursor: pointer; overflow: hidden; white-space: nowrap; } .home-shortcuts li:first-child { border-left: 1px solid #0E88B0; } .home-shortcuts li a { display: block; color: #fff; text-decoration: none; } .home-shortcuts li i { font-size: 22px; } .home-shortcuts li p { margin: 2px 0 0; text-transform: uppercase; } .home-shortcuts li span { display: none; } .home-shortcuts li:hover span { display: inline-block; } .home-shortcuts .lead { margin: 0; line-height: 55px; } @media (max-width: 992px) { .home-shortcuts ul { text-align: center; } } @media (max-width: 767px) { .home-shortcuts li { display: block; float: none; width: 100%; border-right: 0; border-bottom: 1px solid #0E88B0; } .home-shortcuts li:first-child { border-left: 0; } .home-shortcuts li:last-child { border: 0; } .home-shortcuts ul:hover li { width: 100%; } } /** * ------------------------- * Client Homepage * ------------------------- */ .text-domain { font-size: 12px; color: #006687; } .client-home-panels .panel > .panel-heading { background-color: #fff; border-bottom: 0; font-weight: bold; } .client-home-panels .panel > .panel-heading .panel-title .btn { color: #fff; border: 0; } .client-home-panels .panel > .panel-heading .panel-title .btn:hover { color: #000; } .client-home-panels .panel small { color: #888; } .client-home-panels .panel > .panel-body { padding: 0; max-height: 170px; overflow: auto; } .client-home-panels .panel > .panel-footer { border-top: 0; } .client-home-panels .panel > .panel-body p { padding: 10px 15px; } .client-home-panels .panel > .list-group { max-height: 170px; overflow: auto; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .client-home-panels .panel > .list-group .list-group-item { padding: 4px 10px; } .client-home-panels .panel > .list-group .list-group-item:last-child { border-bottom: 0; } .home-kb-search { margin-bottom: -8px; } .home-kb-search .form-control { border: 0; background-color: #444; color: #fff; padding-left: 50px; } .home-kb-search i { position: relative; top: -35px; left: 20px; color: #777; } /** * ------------------------- * Client Homepage Tiles * ------------------------- */ .tiles { margin: 0 15px 15px 15px; } .tiles .tile { padding: 12px 20px; background-color: #f8f8f8; border-right: 1px solid #ccc; } .tiles .tile a { text-decoration: none; } .tiles .tile:hover { background-color: #f2f2f2; cursor: pointer; } .tiles .tile .highlight { margin-top: 4px; height: 2px; border-radius: 2px; } .tiles .tile:last-child { border: 0; } @media (max-width: 767px) { .tiles .tile:nth-child(2) { border: 0; } .tiles .tile:nth-child(1), .tiles .tile:nth-child(2) { border-bottom: 1px solid #ccc; } } .tile .icon { position: absolute; top: 10px; right: 10px; font-size: 48px; line-height: 1; color: #ccc; } .tile .stat { margin-top: 20px; font-size: 40px; line-height: 1; } .tile .title { font-weight: bold; color: #888; text-transform: uppercase; font-size: 12px; } /** * ------------------------- * Panel Accents * ------------------------- */ .panel.panel-accent-gold { border-top: 3px solid #f0ad4e; } .panel.panel-accent-green { border-top: 3px solid #5cb85c; } .panel.panel-accent-red { border-top: 3px solid #d9534f; } .panel.panel-accent-blue { border-top: 3px solid #5bc0de; } .panel.panel-accent-orange { border-top: 3px solid #f39c12; } .panel.panel-accent-pink { border-top: 3px solid #e671b8; } .panel.panel-accent-purple { border-top: 3px solid #7b4f9d; } .panel.panel-accent-lime { border-top: 3px solid #8cbf26; } .panel.panel-accent-magenta { border-top: 3px solid #ff0097; } .panel.panel-accent-teal { border-top: 3px solid #00aba9; } .panel.panel-accent-turquoise { border-top: 3px solid #1abc9c; } .panel.panel-accent-emerald { border-top: 3px solid #2ecc71; } .panel.panel-accent-amethyst { border-top: 3px solid #9b59b6; } .panel.panel-accent-wet-asphalt { border-top: 3px solid #34495e; } .panel.panel-accent-midnight-blue { border-top: 3px solid #2c3e50; } .panel.panel-accent-sun-flower { border-top: 3px solid #f1c40f; } .panel.panel-accent-pomegranate { border-top: 3px solid #c0392b; } .panel.panel-accent-silver { border-top: 3px solid #bdc3c7; } .panel.panel-accent-asbestos { border-top: 3px solid #7f8c8d; } /** * ------------------------- * Background Colors * ------------------------- */ .bg-color-gold { background-color: #f0ad4e; } .bg-color-green { background-color: #5cb85c; } .bg-color-red { background-color: #d9534f; } .bg-color-blue { background-color: #5bc0de; } .bg-color-orange { background-color: #f39c12; } .bg-color-pink { background-color: #e671b8; } .bg-color-purple { background-color: #7b4f9d; } .bg-color-lime { background-color: #8cbf26; } .bg-color-magenta { background-color: #ff0097; } .bg-color-teal { background-color: #00aba9; } .bg-color-turquoise { background-color: #1abc9c; } .bg-color-emerald { background-color: #2ecc71; } .bg-color-amethyst { background-color: #9b59b6; } .bg-color-wet-asphalt { background-color: #34495e; } .bg-color-midnight-blue { background-color: #2c3e50; } .bg-color-sun-flower { background-color: #f1c40f; } .bg-color-pomegranate { background-color: #c0392b; } .bg-color-silver { background-color: #bdc3c7; } .bg-color-asbestos { background-color: #7f8c8d; } /** * ------------------------- * @section Navigational Bar * ------------------------- */ #top-nav { float: right; margin: 0; padding: 0; } #top-nav .nav { margin: 0; padding: 0; line-height: 22px; font-size: 11px; } #top-nav a.quick-nav { margin: 0 0 0 15px; padding: 0; color: #888; } /** * ------------------------- * @section Twitter Feed * ------------------------- */ div.home-twitter { margin-top: 20px; margin-bottom: 40px; } div.tweet > i { color: #2BABCF; float: left; margin-right: 15px; } div.tweet span { font-size: 12px; color: #ccc; } /* ===== Domain Checker ===== */ div.domainresults div:not(.btn-group) { margin: 0; padding: 10px 25px; background-color: #ddd; color: #666; font-size: 1.0em; border-radius: 6px 6px 0 0; } div.domainresults div:not(.btn-group) span { padding-left: 20px; font-size: 14px; color: #888; } div.domainresults table tr td { padding: 5px 30px; line-height: 40px; } .domain-checker-container { margin: 20px 0; padding: 0; background-color: #ffce44; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffb201), to(#ffd960)); background: -webkit-linear-gradient(top, #ffd960, #ffb201); background: -moz-linear-gradient(top, #ffd960, #ffb201); background: -ms-linear-gradient(top, #ffd960, #ffb201); background: -o-linear-gradient(top, #ffd960, #ffb201); } .domain-checker-bg { margin: 0; padding: 80px 0; background-repeat: no-repeat; background-position: 110% -5px; background-image:url('../img/globe.png'); } @media (max-width: 992px) { .domain-checker-bg { padding: 40px 0; } } .domain-checker-container .input-group-box { margin: 0 auto; padding: 10px; background-color: #fff; -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; } .domain-bulk-options-box { position: absolute; top: 18px; right: 134px; z-index:100; } .domain-check-availability { width: 100px; } .domain-step-options { min-height: 300px; } .domain-checker-result-headline { margin: 20px; font-size: 1.6em; text-align: center; } .domain-checker-available { color: #5cb85c; } .domain-checker-unavailable { color: #d9534f; } div.domainresults div.domain-checkout-area { display: none; float: right; padding: 8px 40px 0; } .domain-disclaimer-area { margin: 0 0 25px 0; font-size: 12px; } .domain-bulk-domain-well { width: 60%; } .domain-tld-pricing-table-responsive { border: 0; margin-bottom: 0; } a.domain-tld-pricing-category { display: block; text-align: center; } /** * ------------------------- * @section Announcements Page * ------------------------- */ div.announcement-single { margin: 0 0 20px 0; } div.announcement-single blockquote { margin-top: 30px; } div.announcement-single .label { margin-right: 10px; } /** * ------------------------- * @section Product Details Page * ------------------------- */ div.product-details { margin: 0 0 20px 0; } div.product-details div.product-icon { margin: 0; background-color: #efefef; border-radius: 10px; padding: 30px; line-height: 1em; font-size: 60px; } @media (max-width: 767px) { div.product-details div.product-icon { font-size: 30px; } } .product-status { margin: 0 0 20px 0; padding: 0; border-radius: 10px; } .product-status-pending { background-color: #F89406; } .product-status-active { background-color: #46A546; } .product-status-suspended { background-color: #0768B8; } .product-status-terminated, .product-status-cancelled { background-color: #666; } .product-status-fraud { background-color: #000; } .product-status-text { padding: 5px; color: #fff; text-align: center; text-transform: uppercase; } div.product-details-tab-container { margin: 0; padding: 20px; border: 1px solid #ddd; border-top: 0; background-color: #fff; } .module-client-area { padding: 15px 15px 0 15px; } .promo-container { margin-bottom: 20px; } #mc-promo-widgets { margin: 10px 0; } @media (min-width: 1200px) { #mc-promo-widgets { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; } } .mc-promo-manage, .mc-promo-login { position: relative; } .mc-promo-manage .panel, .mc-promo-login .panel { padding: 10px; } .mc-promo-manage .panel-title, .mc-promo-login .panel-title { font-size: 18px; } .mc-promo-manage .logo, .mc-promo-login .logo { display: inline-block; vertical-align: middle; position: relative; margin-right: 1em; } .mc-promo-manage .logo, .mc-promo-login .logo { width: 130px; height: 130px; } @media (max-width: 767px) { .mc-promo-manage .logo, .mc-promo-login .logo { width: 65px; height: 65px; } } .mc-promo-manage .logo img, .mc-promo-login .logo img { display: block; margin: 0 -50% 0 auto; border-radius: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 130px; max-height: 130px; } @media (max-width: 767px) { .mc-promo-manage .logo img, .mc-promo-login .logo img { max-width: 65px; max-height: 65px; } } .mc-promo-manage .logo + div, .mc-promo-login .logo + div { display: inline-block; position: absolute; top: 50%; transform: translate(0, -50%); } @media (max-width: 767px) { .mc-promo-manage .panel-heading, .mc-promo-login .panel-heading { padding: 10px 10px 5px 10px; } .mc-promo-manage .panel-body, .mc-promo-login .panel-body { padding: 5px 10px 10px 10px; } } /** * ------------------------- * @section List Tables * ------------------------- */ .dataTables_wrapper { background-color: #E6ECEF; border: 1px #ccc solid; border-radius: 4px; font-size: 0.9em; } .dataTables_wrapper .dataTables_info { padding: 9px 10px; background-color: #006587; border: 0; border-bottom: 1px solid #fff; font-size: 0.9em; color: #fff; border-radius: 4px 4px 0 0; text-align: left !important; } .dataTables_wrapper table.table-list { margin-top: 0 !important; margin-bottom: 6px !important; } .dataTables_wrapper .dataTables_filter { float: right; } .dataTables_wrapper .dataTables_filter label { padding: 6px 6px 0; position: relative; } .dataTables_wrapper .dataTables_filter label:after { content: "\f002"; font-family: Font Awesome\ 5 Free; font-style: normal; font-weight: 900; text-decoration: inherit; position: absolute; top: 10px; right: 14px; } .dataTables_wrapper .dataTables_filter label .form-control { padding: 1px 10px !important; background-color: #f8f8f8; border: 1px solid #fff; font-size: 0.9em; height: 30px; width: 300px; } table#tableDomainsList tr { cursor: pointer; } @media (max-width: 600px) { .dataTables_wrapper .dataTables_info { padding: 9px 10px 40px; } .dataTables_wrapper .dataTables_filter { float: right; margin-top: 30px; width: 100%; } .dataTables_wrapper .dataTables_filter label { display: block; margin: 5px; padding: 0; } .dataTables_wrapper .dataTables_filter label .form-control { margin: 0; width: 100%; } } .dataTables_wrapper .dataTables_length { float: left; } .dataTables_wrapper .dataTables_length label { padding: 10px 10px 0; } .dataTables_wrapper .dataTables_length label .form-control { display: inline-block; padding: 2px; height: 25px; width: auto; } .dataTables_wrapper .dataTables_paginate { float: right; padding: 6px 10px 0; } .dataTables_wrapper .dataTables_paginate .pagination > li > a, .dataTables_wrapper .dataTables_paginate .pagination > li > span { padding: 4px 8px; } table.dataTable.dtr-inline.collapsed tbody td:first-child:before, table.dataTable.dtr-inline.collapsed tbody th:first-child:before { top: inherit !important; box-shadow: none !important; line-height: 16px !important; } .table-container { padding: 0 0 25px 0; } table.table-list thead th { background-color: #E6ECEF; border-bottom: 1px solid #ccc; color: #333; font-size: 13px; } .table-list > tbody > tr:hover { cursor: pointer; cursor: hand; } .table-list > tbody > tr > td { background-color: #fff; font-size: 12px; } .table-list > tbody > tr:nth-child(odd) > td, .table-list > tbody > tr:nth-child(odd) > th { background-color: #FAFAFA; } .table-list > tbody > tr:hover > td { background-color: #E6ECEF; } table.table-list th { text-align: center; } table.table-list tbody td, table.table-list tbody td { padding: 5px 10px; vertical-align: middle; } table.dtr-inline .dtr-title:empty { display: none !important; } table.dtr-inline .responsive-edit-button { display: none; } table.dtr-inline.collapsed .responsive-edit-button { display: inherit; } /** * ------------------------- * @section Status Lights * ------------------------- */ .status { display: block; font-size: 0.9em; line-height: 22px; background-color: #888; } .status-custom { background-color: white; color: black; border: 1px solid black; padding: 1px; } .status-pending { background-color: #D9534F; } .status-pending-transfer { background-color: #A68500; } .status-active, .status-open { background-color: #3fad46; } .status-suspended { background-color: #F0AD4E; } .status-customer-reply { background-color: #ff6600; } .status-fraud, .status-answered { background-color: #000000; } .status-expired, .status-transferred-away { background-color: #004258; } .status-pending-registration, .status-redemption, .status-grace { color: #F89406; } .status-cancelled { background-color: #9FA29A; } .status-terminated { background-color: #666; } .status-onhold { background-color: #224488; } .status-inprogress { background-color: #cc0000; } .status-closed { background-color: #888; } .status-paid { background-color: #498302; } .status-unpaid { background-color: #ED3E48; } .status-cancelled { background-color: #C52127; } .status-collections { background-color: #9A141E; color: #FFFFFF; } .status-refunded { background-color: #319FC3; } .status-customer-reply { background-color: #ff6600; } .status-delivered { background-color: #224488; } .status-accepted { background-color: #498302; } .status-lost, .status-dead { background-color: #FFFFFF; border: 1px solid #000000; color: #000000; } /** * ------------------------- * @section Affiliates Page * ------------------------- */ .affiliate-stat { margin: 0; padding: 15px; font-size: 1.6em; text-align: center; } .affiliate-stat span { display: block; font-size: 2.4em; } .affiliate-stat i { float: left; padding: 10px; font-size: 4em; } .affiliate-referral-link { margin: 20px 0; background: #f5f5f5; padding: 20px; } .affiliate-referral-link span { display: block; margin: 0; padding: 10px; font-size: 1.4em; border-radius: 10px; border: 1px solid #ccc; overflow: hidden; } @media (max-width: 1200px) { .affiliate-stat { font-size: 1.2em; } .affiliate-stat span { font-size: 2.1em; } .affiliate-stat i { font-size: 3.6em; } } @media (max-width: 992px) { .affiliate-stat { font-size: 1.0em; } .affiliate-stat span { font-size: 1.6em; } .affiliate-stat i { font-size: 3em; } } /** * ------------------------- * @section Support Tickets * ------------------------- */ .ticket-attachments-message { padding-top: 4px; font-size: 0.8em; } .ticket-reply { margin: 10px 0; padding: 0; border: 1px solid #efefef; background-color: #fff; } .ticket-reply.staff { border: 1px solid #CCE4FC; } .ticket-reply .date { float: right; padding: 8px 10px; font-size: 0.8em; } .ticket-reply .user { padding: 5px 0; background-color: #f8f8f8; } .ticket-reply.staff .user { background-color: #F2F9FF; } .ticket-reply .user i { float: left; font-size: 2.2em; padding: 2px 15px; } .ticket-reply .user .name { display: block; font-size: 0.9em; } .ticket-reply .user .type { display: block; font-weight: bold; font-size: 0.8em; } .ticket-reply .message { padding: 12px 15px; } .ticket-reply .rating, .ticket-reply .rating-done { float: right; padding: 5px 10px; unicode-bidi: bidi-override; direction: rtl; font-size: 24px; } .ticket-reply .rating span.star, .ticket-reply .rating-done span.star { font-family: Font Awesome\ 5 Free; font-style: normal; font-weight: 900; text-decoration: inherit; display: inline-block; } .ticket-reply .rating-done .rated { display: inline-block; font-size: 12px; font-family: Tahoma; } .ticket-reply .rating span.star:hover { cursor: pointer; } .ticket-reply .rating span.star:before, .ticket-reply .rating-done span.star:before { content: "\f005"; padding-right: 0; color: #999; } .ticket-reply .rating span.star:hover:before, .ticket-reply .rating span.star:hover ~ span.star:before, .ticket-reply .rating-done span.star.active:before { content: "\f005"; color: #F2DE88; } .ticket-reply .attachments { margin: 0; padding: 10px 20px; border-top: 1px dashed #efefef; background-color: #f8f8f8; font-size: 0.8em; } .ticket-reply .attachments ul { margin: 0; padding: 0 0 0 15px; list-style: none; } .ticket-reply .clear { clear: both; } .panel > .list-group .ticket-details-children { border-width: 0; } .panel > .list-group .ticket-details-children .title { font-weight: bold; } .panel > .list-group .ticket-details-children:nth-child(even) { background-color: #f2f2f2; } .panel > .list-group .ticket-details-children:last-child { border-width: 0 0 1px 0; } /** * ------------------------- * @section Requestor Types * ------------------------- */ .requestor-type-operator { background-color: #5bc0de; } .requestor-type-owner { background-color: #5cb85c; } .requestor-type-authorizeduser { background-color: #777; } .requestor-type-registereduser { background-color: #f0ad4e; } .requestor-type-subaccount { background-color: #777; } .requestor-type-guest { background-color: #ccc; } /** * ------------------------- * @section Support Ticket Feedback * ------------------------- */ .ticketfeedbackstaffcont { margin: 10px auto; padding: 15px; width: 90%; background-color: #efefef; -moz-border-radius: 6px; -webkit-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; } .ticketfeedbackrating { padding: 0 100px; } .ticketfeedbackrating .rate { float: left; padding: 0 10px; min-width: 30px; text-align: center; } /** * ------------------------- * @section Client Notifications * ------------------------- */ .popover-user-notifications { font-size: 0.8em; } .popover-user-notifications .popover-content { padding: 0; } .clientalert { margin: 0; padding: 5px 10px; border-bottom: 1px solid #ddd; } .clientalert:hover { background-color: #efefef; } .clientalert:last-child { border-bottom: 0; } .clientalert .btn-xs { font-family: Verdana; font-size: 10px; } /** * ------------------------- * @section Captcha * ------------------------- */ .captchaimage { margin: 0; padding: 3px 0 4px; -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; text-align: right; } /** * ------------------------- * @section Credit Cards * ------------------------- */ div.credit-card { margin: 0 auto 30px; max-width: 400px; background-color: #f8f8f8; border: 1px solid #ccc; border-radius: 8px; } div.credit-card div.card-type { float: right; padding: 10px 20px; font-size: 1.2em; } div.credit-card div.card-icon { float: left; padding: 7px 7px; font-size: 1.2em; } div.credit-card div.card-number { padding: 10px; background-color: #ccc; font-size: 1.6em; text-align: center; clear: both; } div.credit-card div.card-start { float: left; padding: 20px 0 50px 50px; font-size: 1.3em; text-align: right; } div.credit-card div.card-expiry { float: right; padding: 20px 50px 50px 0; height: 120px; font-size: 1.3em; text-align: right; } div.credit-card div.end { clear: both; } @media (max-width: 600px) { div.credit-card { max-width: 250px; } div.credit-card div.card-type { font-size: 1.0em; } div.credit-card div.card-icon { font-size: 1.0em; } div.credit-card div.card-number { padding: 6px 10px; font-size: 1.2em; } div.credit-card div.card-start { padding: 20px 0 30px 50px; font-size: 0.9em; } div.credit-card div.card-expiry { padding: 20px 50px 30px 0; height: 80px; font-size: 0.9em; } } .auth3d-area { border: 1px solid #fff; } .submit-3d { width: 80%; border: 1px solid #fff; } .invoice-summary { margin: 0 0 25px 0; padding: 15px; height: 500px; background-color: #f8f8f8; border: 4px dashed #efefef; border-radius: 10px; } .invoice-summary-table { margin: 25px 0 25px 0; max-height: 300px; overflow: auto; } .invoice-summary-table td { font-size: 0.8em; } .invoice-summary-table td.total-row { background-color: #efefef; font-weight: bold; } /* Card colors colorpicked from website logos */ div.credit-card .logo-visa { color: #1a1f71; } div.credit-card .logo-amex { color: #43abdf; } div.credit-card .logo-mastercard { color: #ed0b00; } div.credit-card .logo-discover { color: #000000; } /** * ------------------------- * @section Sidebar Responsive Behaviour Classes * ------------------------- */ div.sidebar .list-group-item-selected { background-color: #319FC3; color: #FFFFFF; } div.sidebar .list-group-item-selected .badge { background-color: #FFFFFF; color: #319FC3; } @media (max-width: 991px) { .panel-actions { border: 0; box-shadow: none; } .panel-actions > .panel-heading > .panel-title { display: inline; } .panel-actions > .panel-heading { border-radius: 3px; } .panel-actions > .list-group { padding: 10px; overflow-x: scroll; overflow-y: none; white-space: nowrap; } .panel-actions > .list-group .list-group-item { display: inline-block !important; border: 1px solid #ddd !important; border-radius: 3px !important; white-space: nowrap; text-align: center; padding: 5px 25px; margin: 2px; z-index: auto; /*width: 100%;*/ } .panel-actions > .list-group .list-group-item > .badge { float: none; margin: -2px 0 0 10px; } } /** * ------------------------- * @section Two Factor Authentication * ------------------------- */ div#twofaactivation { margin: 0 auto; padding: 15px 30px; width: 85%; background-color: #efefef; border-radius: 10px; } div#twofaactivation .errorbox { margin: 0 0 20px 0; padding: 10px 20px; background-color: #FF4F4F; text-shadow: none; color: #fff; text-align: center; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; } div#twofaactivation p { margin: 15px 0; } /** * ------------------------- * @section Popups * ------------------------- */ #popup-backdrop { background-color: #2E363F; padding: 15px; height: 100%; } .popup-header-padding { margin-top: 5px; margin-bottom: 5px; } /** * ------------------------- * @section Uncategorized * ------------------------- */ .btn.btn-action { background-color: #72CA06; border-color: #498302; } /** * ------------------------- * @section Knowledgebase * ------------------------- */ .kbcategories a { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 5px; text-decoration: none; } .kbcategories a .glyphicon { color: #ed8; margin-right: 5px; } .kbcategories a small { color: #000; font-size: 80%; font-weight: 400; margin-left: 5px; } .kbarticles { padding: 0 0 25px 0; font-size: 0.8em; } .kbarticles a { font-size: 1.2em; font-weight: 700; } .kbarticles a .glyphicon { color: #8ce; } h3.kb-alsoread { padding: 8px 15px; background-color: #eee; border-radius: 6px; font-size: 0.9em; } /** * ------------------------- * @section Domain Checker Responsive * ------------------------- */ #stepResults { font-size: 20px; } #stepResults .label { font-size: 20px; } @media (max-width: 992px) { #stepResults { font-size: 14px; } #stepResults .label { font-size: 14px; } div.domainresults table tr td { padding: 5px 5px; } } /** * ------------------------- * Printing * ------------------------- */ @media print { .sidebar, #main-menu, #top-nav, .header-lined { display: none; } a[href]:after { content:"" !important; } } /** * ------------------------- * Badges Spacing * ------------------------- */ h3.with-badge::after { content: '.'; color: #fff; } h3.with-badge span, h3.with-badge i { float: left; padding-right: 8px; } h3.with-badge .badge { line-height: initial; margin-top: 3px; } @media (min-width: 992px) { h3.with-badge .badge { padding: 3px 7px 3px 8px; } .sidebar .list-group-item .badge { margin-top: -2px; padding: 3px 7px 3px 8px; line-height: initial; min-width: 36px; } } /** * ------------------------- * Admin Masquerade Notice * ------------------------- */ .admin-masquerade-notice { margin: 25px 0 0 auto; padding: 4px 10px; max-width: 240px; font-family: Tahoma; font-size: 0.7em; text-align: right; } .admin-masquerade-notice a { text-decoration: underline; } /** * ------------------------- * Language Chooser * ------------------------- */ .language-popover { max-width: 450px; width: 100%; background-color: rgba(20, 20, 20, 0.98); background-image: url('../img/worldmap.png'); background-repeat: no-repeat; font-size: 0.8em; } .language-popover.popover.bottom > .arrow:after { border-bottom-color: rgba(20, 20, 20, 0.97); } .language-popover .popover-content ul { margin: 6px 0 14px 0; padding: 0; max-width: 400px; list-style-type: none; overflow: hidden; } .language-popover .popover-content li { float: left; display: inline; padding: 0 20px 0 40px; width: 33.333%; line-height: 2em; } .language-popover .popover-content li a { color: #f2f2f2; } @media (max-width: 480px) { .language-popover { max-width: 250px; background-position: -50px 0; } .language-popover .popover-content li { padding: 0 20px; width: 50%; } } /** * ------------------------- * Login or Register Popover * ------------------------- */ .login-popover { font-size: 12px; } .login-popover .form-group { margin-bottom: 5px; } .login-popover hr { margin: 5px 0; } /** * ------------------------- * Mass Pay * ------------------------- */ tr.masspay-invoice-detail td { font-size: 0.8em; } tr.masspay-total td { background-color: #efefef; font-weight: bold; } /** * ------------------------- * Error Page * ------------------------- */ .error-container { text-align: center; } .error-container h1 { margin-top: 40px; } .error-container .buttons { margin: 25px 0; } .error-container .buttons .btn { margin: 5px; } /** * ------------------------- * Collapsable Panels * ------------------------- */ .panel-collapsable > .panel-heading { cursor: pointer; } .panel-collapsable > .panel-body-collapsed { display: none; } /** * ------------------------- * Licensing Addon * ------------------------- */ .licensing-addon-latest-download h3 { margin-top: 0; } /** * ------------------------- * Domain Checker Captchas * ------------------------- */ #google-recaptcha-domainchecker { width: 304px; height: 78px; margin-top: 15px; margin-bottom: -66px; } #default-captcha-domainchecker { margin-top: 15px; margin-bottom: -63px; } #default-captcha-domainchecker #inputCaptcha { width: 100px; border-radius: 4px; } .domainchecker-homepage-captcha #google-recaptcha-domainchecker { margin-bottom: -46px; } @media (max-width: 991px) { #google-recaptcha-domainchecker { padding-left: 2.5%; margin-bottom: -25px; } #default-captcha-domainchecker { margin-bottom: -25px; } } @media (max-width: 736px) { #google-recaptcha-domainchecker { margin-bottom: -35px; transform: scale(0.935); transform-origin: 0 0; -webkit-transform: scale(0.935); -webkit-transform-origin: 0 0; } } @media (max-width: 384px) { #google-recaptcha-domainchecker { margin-bottom: -30px; transform: scale(0.96); transform-origin: 0 0; } } @media (max-width: 360px) { #google-recaptcha-domainchecker { margin-bottom: -35px; transform: scale(0.89); transform-origin: 0 0; } } @media (max-width: 320px) { #google-recaptcha-domainchecker { padding-left: 13.5%; margin-bottom: -45px; transform: scale(0.83); transform-origin: 0 0; -webkit-transform: scale(0.785); -webkit-transform-origin: 0 0; } } @media screen and ( max-width: 991px ) { #ws-tableBackorderAuction thead{ display: none; } #ws-tableBackorderAuction tbody td{ display: block; text-align: right; line-height: 34px; } #ws-tableBackorderAuction tbody td.domain{ text-align: left !important; padding-left: 10px !important; font-size: larger; overflow-wrap: anywhere; } #ws-tableBackorderAuction td:first-child{ padding-left: 10px; } table tbody td[data-title="Domain"], table tbody th[data-title="Domain"]{ text-align: left !important; padding-left: 10px !important; font-size: larger; overflow-wrap: anywhere; } table tbody td[data-title="Domain"]:before{ display: none; } .auction-update-bid{ width: 100% !important; } #ws-tableBackorderAuction td:last-child{ width: 100%; padding: 10px; } #ws-tableBackorderAuction tbody tr:nth-of-type(odd){ background-color: rgba(0,0,0,.05); } #ws-tableBackorderAuction td:after{ content: attr(data-title); font-weight: bold; float: left; white-space: nowrap; } #ws-tableBackorderAuction td[data-title="My Max Bid"]:after{ margin-top: 8px; } #ws-tableBackorderAuction td[data-title="Status"]{ text-align: right !important; } } /** * ------------------------- * Email Verification * ------------------------- */ .email-verification { .verification-banner { margin: 0; padding: 10px; font-weight: 300; background-color: #f8f8f8; border-bottom: 1px solid #eee; color: #333; } .email-verification .text { .verification-banner .text { display: block; padding: 6px 0; } .email-verification .btn { .verification-banner .btn { margin: 3px 0; padding: 3px 10px; background-color: #50525f; border-color: #50525f; color: #fff; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .email-verification .btn:active, .email-verification .btn[disabled]:hover { .verification-banner.email-verification .btn.btn-action, .verification-banner.email-verification .btn.btn-action:active, .verification-banner.email-verification .btn.btn-action[disabled]:hover { background-color: #50525f; border-color: #50525f; color: #fff; } .email-verification .btn.close { .verification-banner.user-validation .btn.btn-action, .verification-banner.user-validation .btn.btn-action:active, .verification-banner.user-validation .btn.btn-action[disabled]:hover { background-color: #fff; border-color: #ccc; color: #333; } .verification-banner.user-validation i { margin-left:0.11em } .verification-banner .btn.close { margin-left: 10px; background-color: transparent; color: rgba(55, 55, 55, 0.5); font-size: 22px; opacity: 1; } .email-verification .btn.close:hover { .verification-banner .btn.close:hover { color: rgba(55, 55, 55, 0.8); } .email-verification .fas, .email-verification .far { .verification-banner .fas, .verification-banner .fal, .verification-banner .far { color: #666; float: left; padding: 2px 10px 0 0; font-size: 24px; } @media (min-width: 768px) { .email-verification .text { .verification-banner .text { padding-top: 9px; padding-bottom: 0; } .email-verification .btn { .verification-banner .btn { margin: 0; padding: 9px 25px; } .email-verification .button { .verification-banner .button { float: right; } .email-verification .fas, .email-verification .far { .verification-banner .fas, .verification-banner .fal, .verification-banner .far { font-size: 36px; } } .email-verification.success { .verification-banner.success { background-color: #ebfde4; border-bottom: 1px solid #e3f7d5; color: #5cb85c; } .email-verification.success .fas, .email-verification.success .far { .verification-banner.success .fas, .verification-banner.success .fal, .verification-banner.success .far { color: #6fbb51; } .email-verification.failed { .verification-banner.failed { background-color: #fdf8e3; border-bottom: 1px solid #f7f3d0; color: #b3a879; } .email-verification.failed .fas, .email-verification.failed .far { .verification-banner.failed .fas, .verification-banner.failed .fal, .verification-banner.failed .far { color: #b3a879; } /** * ------------------------- * phpLive Chat * ------------------------- */ span#phplive_btn_1496783683, span#phplive_btn_1496783663 { display: none!important; } .clientareaphpactionservices .status-legend-products{ display: none; } .panel-actions>.list-group{ display: block !important } /** v7.10 new styles */ #fullpage-overlay { display: table; position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: black; background-color: rgba(0, 0, 0, 0.8); color: #fff; } #fullpage-overlay .outer-wrapper { position: relative; height: 100%; } #fullpage-overlay .inner-wrapper { position: absolute; top: 50%; left: 50%; height: 30%; width: 50%; margin: -3% 0 0 -25%; text-align: center; } #fullpage-overlay .msg { display: inline-block; padding: 20px; max-width: 400px; } div.two-column-grid, div.three-column-grid { display: inline-grid; grid-template-columns: repeat(3, auto) minmax(10em, 30em) auto; font-weight: 300; font-size: 13px; } div.two-column-grid { grid-template-columns: repeat(2, auto) minmax(10em, 30em) auto; } div.two-column-grid > div, div.three-column-grid > div { margin: 5px 0; padding-right: 5px; } div.two-column-grid > div > label, div.three-column-grid > div > label { font-weight: normal; } .iframe-input-container { height: 34px; } .promo-banner.sitelockvpn { border-top: 3px solid #555; } .promo-banner.sitelockvpn .btn { background-color: #555; } .promo-banner.marketgoo { border-top: 3px solid #3090e0; } .promo-banner.marketgoo .btn { background-color: #3090e0; } .promo-banner.ox { border-top: 3px solid #666; } .promo-banner.ox a { color: #666; } .promo-banner.ox .btn { background-color: #666; } /** * Usage Billing */ .modal-metric-pricing .modal-header, .modal-metric-pricing .modal-body, .modal-metric-pricing .modal-footer { text-align: center !important; border: 0; } .modal-metric-pricing .modal-footer { padding-bottom: 45px; } @media (max-width: 767px) { .btn-xs-block { display: block; width: 100%; } } /** * Select Account */ .select-account { margin: 20px auto; padding: 0; border-top: 1px solid #ddd; } .select-account a { display: block; margin: 0; padding: 10px; border-bottom: 1px solid #ddd; text-decoration: none; } .select-account a.disabled { opacity: 0.5; } .select-account a:hover { background-color: #f6f6f6; } .continue-container { margin: 40px auto; padding: 20px; background-color: #f6f6f6; border: 1px solid #eee; max-width: 500px; } /** * Invites */ .invite-box { margin: 20px 0; padding: 20px; background-color:#f6f6f6; border:1px solid #eee; }