/* Document : custom.css Created on : 03-Nov-2014, 16:03:30 Author : Alex Description: Purpose of the stylesheet follows. */ /*Set height of the grid so .sidenav can be 100% (adjust as needed)*/ .row.content {height: auto;} /*Set gray background color and 100% height*/ .sidenav { background-color: #f1f1f1; height: 100%; } /*On small screens, set height to 'auto' for the grid*/ @media screen and (max-width: 767px) { .row.content {height: auto;} } /* ================================================= 1. Typography ================================================= */ /* ------------------------------------------------- 1a. Custom Fonts ------------------------------------------------- */ @font-face{ font-family: ProximaNova-Bold; src: url('/fonts/ProximaNova-Bold.otf'); } @font-face{ font-family: ProximaNova-Regular; src: url('/fonts/ProximaNova-Regular.otf'); } @font-face{ font-family: GiorgioSans-Bold; src: url('/fonts/GiorgioSans-Bold.otf'); } @font-face{ font-family: GiorgioSans-Medium; src: url('/fonts/GiorgioSans-Medium.otf'); } @font-face{ font-family: FontAwesome; src: url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'); } /* General */ a {outline: 0 !important;} html, body{height: 100%;} /* resets */ .no-margin{ margin: 0px; border-top: 1px solid #e6e6e6; /* margin-left: -15px; margin-right: -15px;*/ /* .row does this?*/ } /* //FIXME */ /*fixing the footer issue*/ html{postion: relative; min-height: 100%;} /*body{margin: 0 0 60px;}*/ body{margin: 0 0 0px;} footer{ position: sticky; left: 0; bottom: 0; /* FIXME issue when resize */ height: 60px; width: 100%; } /* ================================================= Home / Landing Screen ================================================= */ /* ------------------------------------------------- 1a. Home Page Alignment ------------------------------------------------- */ .jumbotron.vertical-center { margin-bottom: 0; /* Remove the default bottom margin of .jumbotron */ } .vertical-center { min-height: 100%; /* Fallback for vh unit */ min-height: 100vh; /* Note that for percentage values of 'height' or 'min-height' properties, the 'height' of the parent element should be specified explicitly. In this case the parent of '.vertical-center' is the element */ /* Make it a flex container */ display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; /* Align the bootstrap's container vertically */ -webkit-box-align : center; -webkit-align-items : center; -moz-box-align : center; -ms-flex-align : center; align-items : center; /* In legacy web browsers such as Firefox 9 we need to specify the width of the flex container */ width: 100%; /* Also 'margin: 0 auto' doesn't have any effect on flex items in such web browsers hence the bootstrap's container won't be aligned to the center anymore. Therefore, we should use the following declarations to get it centered again */ -webkit-box-pack : center; -moz-box-pack : center; -ms-flex-pack : center; -webkit-justify-content : center; justify-content : center; } /* ------------------------------------------------- 1b. Home Page styling ------------------------------------------------- */ /*Overide jumbotron container for #home */ #home .jumbotron .container { max-width: 100%; height: 678.71px; padding-top: 234.43px; } /* Bottom is the height of the anchor box and concat the anchor points */ #home .row.anchorone{ position: absolute; width: 100%; bottom: 209.85px; } #home .row.anchortwo{ position: absolute; width: 100%; bottom: 270px; } #home .row.anchorthree{ position: absolute; width: 100%; bottom: 364.65px; text-align:center; } #home img{ width: 77px; height: auto; } /*move font-family out*/ #home h1{ text-align: center; margin-top: 10px; margin-bottom: 20px; font-size: 28px; color: #000000; font-family: ProximaNova-Bold; } #home h2{ text-align: center; margin-top: 25px; margin-bottom: 25px; font-size: 40px; color: #999999; font-family: ProximaNova-Regular; } #home a{ margin-top: 15px; margin-left: 10px; margin-bottom: 30px; display: inline-block; height: auto; font-family: ProximaNova-Regular; color: #999999; cursor: pointer; } #home a:focus{ color: #999999; background-color: transparent !important; } .vertical-center{ min-height: 100%; min-height: 100vh; -webkit-box-align : center; -webkit-align-items : center; -moz-box-align : center; -ms-flex-align : center; align-items : center; } body#home { margin: 0px; }/*counter the 60margin issue with the footer*/ .forgot-password{ text-align: left; } #home input[type="text"], #home input[type="password"]{ width: 100%; height: 42px; border: 1px solid #cccccc; border-radius: 5px; } #home input.email{ margin-bottom: 8px; } #home input.password{ font-size: 13px; -webkit-text-security: disc; } /* this will only apply to Webkit browsers like Chrome */ @media screen and (-webkit-min-device-pixel-ratio:0) { #home input[type="password"] { -webkit-text-stroke-width: 0.2em; letter-spacing: 0.2em; } } #home input.email:focus, input.password:focus { font-family: ProximaNova-Bold; } #home a:hover{ font-family: ProximaNova-Bold; text-decoration: none; } #home input[type="submit"]{ width:100%; background-color: #8dabd9; color: #fff; height: 50px; border-radius: 5px; border: none; } #home input[type="submit"]:hover{ opacity: 0.8; } #home input::-webkit-input-placeholder{font-size: 16px;letter-spacing: 0em; -webkit-text-stroke-width: 0em;} #home input:-moz-placeholder{font-size: 16px; letter-spacing: 0em;} #home input::-moz-placeholder{font-size: 16px; letter-spacing: 0em;} #home input:-ms-input-placeholder{font-size: 16px; letter-spacing: 0em;} /* ================================================= 1. Page Class Styling / Layout ================================================= */ /* ------------------------------------------------- 1a. Fixed colour bar at the top ------------------------------------------------- */ .fixed-bar{ z-index: 1; background-color: #8dabd9; /* margin-left: -15px; margin-right: -15px;*/ height: 8px; } /* ------------------------------------------------- 1b. Page Header ------------------------------------------------- */ #page-header{ height: 60px; width: 100%; background: #f2f2f2; } #page-header h1{ font-family: ProximaNova-Regular; font-size: 28px; text-align: center; padding-top: 16px; padding-bottom: 16px; height: 60px; margin-top: 0px; margin-bottom: 0px; vertical-align: middle; } /* ------------------------------------------------- 1c. Search --------------------------------------------------*/ #custom-search{ background: #f2f2f2; height: inherit; } #custom-search-input input{ height: 32px; /*width: 470px;*/ /*width: 100%;*/ /*width: 75%; work out the %*/ width: 63%; border-radius: 5px; } #custom-search-input button.btn-info{ height: 32px; /* border-bottom-left-radius: 0; border-top-left-radius: 0;*/ border-color: #8dabd9; background-color: #8dabd9; } #custom-search-input input[type="submit"]{ width: 100px; } #custom-search-input button.btn-info:hover{ opacity: 0.8; } input[type="submit"]:hover{ opacity: 0.8; } /*.search .form-group{ margin-bottom: 0px; }*/ .search.form-control{ float:right; width: 80%; } span.search{ font-family: ProximaNova-Regular; font-size: 16px; height: 32px; margin-top: 7.5px; display: inline-block; text-align: center; width: 10%; } .selectpicker.form-control.search{ width: 71%; } #objOrderBy select.form-control{ width: 80%; display: inline-block; color: #999999; } /* ------------------------------------------------- 1c. Toolbar ------------------------------------------------- */ #toolbar{ background-color: #f2f2f2; /*height: 100px;*/ } .buttonToolbar{ /*entire toolbar*/ } #custom-search-input{ /*search row */ } #objOrderBy{ /*order by row*/ display: none; } .selecpicker:moz-focusring{ color: transparent; text-shadow: 0 0 0 #000; } #search{ } select.search{ border-radius: 5px; border-bottom-left-radius: 5px !important; border-top-left-radius: 5px !important; color: #999; } select:-moz-focusring { color: transparent; text-shadow: 0 0 0 #000; } .add-button{ color: #fff; background-color: #8dabd9; border: none; width: 135px; float: left; height: 32px; margin-right: 10px; } .add-button:hover, .add-button:active, .add-button:focus{ /* fixme focus/active, when hold and move mouse away - currently stays indented*/ background-color: #8dabd9 !important; opacity: 0.8 !important; color: #fff !important; } .delete-button{ color: #fff; background-color: #3a383d; border: none; width: 135px; float: left; height: 32px; margin-right: 10px; } .delete-button:hover, .delete-button:active, .delete-button:focus{ /* fixme focus/active, when hold and move mouse away - currently stays indented*/ background-color: #3a383d !important; opacity: 0.8 !important; color: #fff !important; } /* ------------------------------------------------- 1d. List content ------------------------------------------------- */ #list-content{ background-color: #fff; } /* ------------------------------------------------- 1e. Form View - getForm --------------------------------------------------*/ .formSubTitle{ height: 70px; } h2.right{ text-align: right; } .formSubTitle h2{ /* //FIXME collate h1, h2 tags etc */ font-family: ProximaNova-Bold; font-size: 16px; margin-top: 27px; } .save{ width: 146px; height: 32px; color: #fff; background-color: #8dabd9; border: none; border-radius: 5px; } /* ================================================= Section specific styling e.g. Internal Users ===================================================*/ /* TABLE STYLING ON INTERNAL USERS - spacer row inbetween records*/ thead{ height: 35px; background-color: #f2f2f2 !important; margin-left: 0px; padding-left: 0px; } .table > thead > tr > th{ border-bottom: 0px solid #fff; /* display: none;*/ background-color: #ffffff; } .table > tbody > tr.content > td { border-top: 1px solid #ccc; } tr{border: 1px solid #f2f2f2; border-bottom: 1px solid transparent; height: 10px; } tr.spacer{border: none;} td{ /*border: 0px none;*/ padding: 11px 0 11px 0; } td.spacer{height: 10px;border: none;} tr.content{ height: 50px !important; border: 1px solid #ccc !important; border-radius: 5px; } table { border-collapse: separate; border-spacing: 0; } td.first-content{ border: solid 1px #ccc; border-style: solid none solid solid; } td.second-content{ border: solid 1px #ccc; border-style: solid none; } td.third-content { border: solid 1px #ccc; border-style: solid solid solid none; padding: 10px; } .table > tbody > tr > td{ line-height: 1.2; padding: 5px 25px; } tr.content td:first-child { border-top-left-radius: 5px; } tr.content td:last-child { border-top-right-radius: 5px; } tr.content td:first-child { border-bottom-left-radius: 5px; } tr.content td:last-child { border-bottom-right-radius: 5px; } tr.content td { border-top-style: solid; } /*tr.content td { border-left-style: solid; }*/ table a { text-decoration: none !important; } /* //Move this fix */ #toolbar p{ margin: 0; } /* Font Awesome */ .cursorpointer{ /*add cursor on hover*/ cursor: pointer; } .cursormouse{ cursor: default; } /* Permissions List */ #permissions-landlord{ margin-bottom: 20px; } /* //FIXE ME restrict to correct #body pages */ input.column1[type='checkbox']{margin-left: 0em;} input.column2[type='checkbox']{ margin-left: 10em !important; } .reset{ margin-top: -6em;} .reset-student-swipe{margin-top: -4.6875em;} /* separate the list from surrounding elements */ ol { margin: 0 0 1em 2em; padding: 0; } ol li { /* Stipulate the height of each item so that vertical return = items * height */ line-height: 1.2em; /* Clear the default margins & padding so we can style the list from scratch */ margin: 0; padding: 0; } /* If li position is left static, Internet Explorer disables hyperlinks in the list in all but the final column. This rule will be processed only by Internet Explorer because only IE believes that there’s a level above HTML: */ * html ol li { position: relative; } /* horizontal position of each column */ ol li.column1 { margin-left: -4em; } ol li.column2 { margin-left: 23.5em; } /* Bring the first item of each column back up to the level of item 1. Vertical return = items * height. Here, 5 items * 1.2em line-height = 6em */ li.reset { margin-top: -10.5em; } /* anchor styling */ ol li a { display: block; width: 7em; text-decoration: none; } ol li a:hover { color: #ccc; /* white */ /*background-color: #A52A2A; brown */ } ol{ list-style-type: none; } .column1, .column2{ padding-left: 32px; position: relative; } .column1:before, .column2:before { position: absolute; font-family: 'FontAwesome'; top: 0px; left: 10px; /*content: "\f096";*/ cursor: pointer; } .column1:after, .column2:after { position: absolute; font-family: 'FontAwesome'; top: 0px; left: 10px; /*content: "\f046";*/ cursor: pointer; } .column1.fa-lg, .column2.fa-lg{ line-height: 1; } input[type="checkbox"] + label:before { font-family: FontAwesome; display: inline-block; } input[type="checkbox"]:checked + label:before { font-family: FontAwesome; display: inline-block; margin-right: 2.717px; } input[type="checkbox"] + label:before { content: "\f096"; } input[type="checkbox"] + label:before{ letter-spacing: 10px; } input[type="checkbox"]:checked + label:before{ content: "\f046"; } input[type="checkbox"]:checked + label:before{ letter-spacing: 5px; } input[type="checkbox"]{ display: none; } img.feedback{ padding: 0px 2px; } /* one column / two column layout */ input[type="text"].onecolumn, select.onecolumn{ display: inline-block; width: 49% !important; height: 42px; border: 1px solid #cccccc; padding: 1px 1px 1px 10px; border-radius: 5px !important; } #fltRentPw.onecolumn{ width: 100% !important; } input.property-date{ height: 42px !important; } input[type="text"].twocolumns, input[type="number"].twocolumns, select.twocolumns, input[type="password"].twocolumns{ display: block; width: 100%; height: 42px; border: 1px solid #cccccc; padding: 1px 1px 1px 10px; border-radius: 5px !important; margin-bottom: 10px; } select.onecolumn.right, input[type="text"].onecolumn.right{ float:right; } textarea{ resize: none; font-family: ProximaNova-Regular; } textarea.onecolumn{ display: inline-block; width: 49%; border: 1px solid #cccccc; padding: 1px 1px 1px 10px; border-radius: 5px !important; } input[type="text"].property, select.property{ display: block; width: 90%; height: 42px; border: 1px solid #cccccc; padding: 1px 1px 1px 10px; border-radius: 5px !important; margin: 0px; } span.glyphicon.glyphicon-exclamation-sign { margin: 0px 10px 10px 0px; } /*OFFERS */ img.onecolumn{ width: 49%; /*height: auto;*/ height: 205px; border-radius: 5px; } img.onecolumn.right{ float: right; } textarea.onecolumn{ width: 49%; height: 205px; resize: none; } p#bg-success{ /* position: fixed; top: 129px; left: 31%;*/ width: 200px; height: auto; z-index: 1; margin: 40px 0px 20px 0px; } p#bg-danger{ height: auto; z-index: 1; margin: 40px 0px 20px 0px; } /* User Profiles */ #TenantProfiles textarea, #UserProfiles textarea{ height: 130px; } #TenantProfiles .reminder, #UserProfiles .reminder{ width: 100%; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #fff; height: 33px; border: none; background: #3a383d url(/img/icons/mail.png) no-repeat 56% 50%; text-align: center; padding-right: 70px; } #TenantProfiles p.reminder-details, #UserProfiles p.reminder-details, #Properties p.reminder-details{ color: #e11919; font-weight: 700; margin: 20px 0px; font-size: 14px; display: inline-block; } #TenantProfiles p.reminder-details:nth-child(1), #UserProfiles p.reminder-details:nth-child(1), #Properties p.reminder-details:nth-child(1) { margin-right: 15px; } .alt-background{ background-color: #f4f4f4; overflow: auto; } #UserProfiles a:hover{ text-decoration: none; } .col-lg-12.user-profile img { max-height: 120px; margin-right: 20px; } #TenantProfiles h3 { font-family: "ProximaNova-Bold"; font-size: 14px; margin: 15px 0px 15px 0px; height: 30px; padding: 8px 0px; } /* CUSTOM CALENDAR */ .bootstrap-datetimepicker-widget table td.active,.bootstrap-datetimepicker-widget table td span.active{ background-color: #8dabd9 !important; color: #000 !important; } .bootstrap-datetimepicker-widget table td.today::before{ border-bottom-color: #3a383d !important; opacity: 1.0; } .datepicker > div > table > thead{ background-color: #3a383d !important; color: #fff; } .bootstrap-datetimepicker-widget table td span:hover, .bootstrap-datetimepicker-widget table td.day:hover, .bootstrap-datetimepicker-widget table thead tr:first-child th:hover { background: #8dabd9 !important; opacity: 0.8; } .bootstrap-datetimepicker-widget table td { padding: 5px !important; } #bos_dialog_bkg { position:fixed; width: 100%; height: 100%; top: 0; left: 0; display:table; background-color: rgba(0,0,0,0.2); z-index: 1000; } .bos_dialog { position: absolute; top: 300px; left: 50%; width: 600px; margin-left: -300px; height: 300px; margin-top: -25px; background: white; -moz-box-shadow: 5px 5px 15px #555555; -webkit-box-shadow: 5px 5px 15px #555555; box-shadow: 5px 5px 15px #555555; text-align: center; } .bos_dialog h3 { font-size: 27px; font-weight: 500; line-height: 1.1; color: #333333; } #bos_dialog_heading_top { width: 100%; height: 10px; background: #8dabd9; } .bos_dialog span { margin-top: 45px; height: 95px; display: inline-block; /*font-size: 14pt; font-weight: lighter; letter-spacing: 1.5px;*/ font-size:16px; width:100%; } .bos_dialog button { width: 50%; border: none; outline: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #fff; background-color: #3a383d; padding-top: 12px; padding-bottom: 12px; cursor: pointer; /*font-size: 11pt; font-weight: lighter; letter-spacing: 1.5px;*/ font-size:16px; color: #eee; /*text-transform: uppercase;*/ } .dialog_confirm button { width: 40%; } .dialog_confirm select { height:40px; text-indent:5px; border-top:1px solid #CCCCCC; border-radius:5px; min-width:40%; margin-top:10px; } .bos_dialog button:active, .bos_dialog button:hover { opacity: 0.8; } .dialog_confirm button#dialog_close { margin-right: 20px; } .dialog_confirm button#dialog_confirm { background:#8dabd9; } .dialog_confirm .divider { border: 1px solid #CCCCCC; margin-bottom: 10px; } .bos_dialog.dialog_confirm span { margin-top:25px; height:112px; } /* viewForm */ table.buttons td{ padding: 0px; } /* List view links */ tr.clickable-row { cursor: pointer; transition:background 400ms ease-out; } tr.clickable-row:hover{ background-color: #f4f4f4; } /* Headings to the Property */ h4.heading, label.heading { font-family: 'ProximaNova-Regular'; color: #8dabd9; font-size: 14px; font-weight: normal; } label.heading { margin: 1px 0 11px 0; } /* Calendar fix for chrome */ .bootstrap-datetimepicker-widget table td, .bootstrap-datetimepicker-widget table th { border-radius: 0px !important; } .bootstrap-datetimepicker-widget table td.active{ border-radius: 4px !important; } /* ------------------------------------------------------------------- */ /* Looking into fixing the styling on the BS date picker */ .input-group.date input { height:100%; } .bootstrap-datetimepicker-widget .datepicker .datepicker-days { width:100%; } .bootstrap-datetimepicker-widget .datepicker .datepicker-months { width:100%; } .bootstrap-datetimepicker-widget .datepicker .datepicker-years { width:100%; } .bootstrap-datetimepicker-widget .datepicker .datepicker-decades { width:100%; } .bootstrap-datetimepicker-widget .datepicker .table-condensed tHead th { border-radius:0px; } /* * Property - Tenant details */ #tenant-details .btn-default{ background-color: #fff; border-color: #ccc; } #tenant-details #generate{ background-color: #8dabd9; border: none; color: #fff; height: 32px; width: 150px; } #tenant-details .buttons{ padding: 0; display: block; } #tenant-details .save{ width: 150px; } #payment-reminder .buttons{ padding: 0; display: block; } #payment-reminder .save{ width: 150px; } /** ------------------------------------------------------------------------------- Offers and Events -------------------------------------------------------------------------------- */ #OffersandEvents .buttonImage { cursor:pointer; } #OffersandEvents .buttonImage:hover { transform:scale( 1.2 ); } /** These could be made global with minimal tweaking ( .table instead of the page id for example )**/ #OffersandEvents .row.content:hover { background:none; } /** Fixes the checkboxes just for the offers & events page ( for approval ). @TODO make suitable for system wide deployment if/when approved **/ input[type=checkbox] { display:none; } label:before { border-radius:3px; } input[type=checkbox] + label:before { content: close-quote; width: 15px; height: 15px; margin-right: 8px; border: 2px solid #CCCCCC; display:inline-flex; } input[type=checkbox]:checked + label:before { border:0; content:"\2713"; color:#f3f3f3; text-align:center; background:#8dabd9; width:15px; height:15px; margin:0; margin-right:8px; padding:0; padding-left:2px; font-size:13px; font-weight:bold; } input[type=checkbox] + label { font-weight:normal; } select.form{ color: #999999; } /** 22/07/2016 :: The behaviour for the logo and name needed improving **/ #logoAndTitle { } #logoAndTitle td { padding:5px 0 5px 0; } #logoAndTitle td h2 { vertical-align:midle; display:table-cell; font-size:18px; } ol.cleanedStyle { background: #FCFCFC; border-radius: 4px; border: 1px solid #CCCCCC; margin: 10px 0; padding: 10px; justify-content: space-between; display: flex; flex-flow: row wrap; } ol.cleanedStyle li { margin:0; padding:0; min-width:50%; } .caret-container { float: right; } .nav-sub-container { background-color: #f8f8f8; font-weight: bold; cursor: pointer; } ul.nav-stacked ul.nav-stacked > li > a { padding-left: 30px; } .view-content h2{ font-family: ProximaNova-Bold; font-size: 16px; margin-top: 22px; margin-bottom: 22px; } .view-content p.view-title { font-size: 14px; margin-bottom: 10px; color: #8dabd9; } .view-content p.view-text { font-size: 16px; margin-bottom: 20px; color: #555555; } .view-content table thead { color: #8dabd9; } .view-content table thead tr th { padding: 5px 0px; } .view-content .table > thead > tr > th{ vertical-align: middle; } .view-content .table > tbody > tr > td{ padding: 5px 0px; } .table.table-paid, .table.table-plan-payments.payment-records{ border-collapse: separate; border-spacing: 0px 5px; } .table.table-paid > tbody > tr, .table.table-plan-payments.payment-records > tbody > tr{ height: 31px; border: 1px solid #CCCCCC !important; border-radius: 5px; cursor: pointer; } .table.table-paid > tbody > tr > td, .table.table-plan-payments.payment-records > tbody > tr > td{ border-top: 1px solid #CCCCCC !important; border-bottom: 1px solid #CCCCCC; padding: 6px 3px !important; } .table.table-paid > tbody > tr > td:first-child, .table.table-plan-payments.payment-records > tbody > tr > td:first-child{ border-left: 1px solid #CCCCCC; border-top-left-radius: 5px; border-bottom-left-radius: 5px; padding-left: 6px !important; } .table.table-paid > tbody > tr > td:last-child, .table.table-plan-payments.payment-records > tbody > tr > td:last-child{ border-right: 1px solid #CCCCCC; border-top-right-radius: 5px; border-bottom-right-radius: 5px; padding-right: 6px !important; } table#payment-plan td{ padding-right: 30px; } table#payment-template td{ padding-right: 15px; } table#payment-plan img:hover, table#payment-template img:hover { cursor: pointer; } .bootstrap-datetimepicker-widget table td.disabled, .bootstrap-datetimepicker-widget table td.disabled:hover { } #wrap { min-height: 100vh; } #main { overflow: auto; padding-bottom: 60px; } footer { position: relative; clear: both; margin-top: -60px; height: 60px; } #Notifications #property, #Notifications select#academicyear, #Notifications #tenant, #Notifications #activeacademicyear { margin-bottom: 15px; } .checkInHeader { font-size: 10pt; font-weight: bold; float: right; width: 80px; } /* Tenant Profiles */ #TenantProfiles div#tenant-reminders{ max-height: 200px; overflow-y: scroll; overflow-x: hidden; margin-bottom: 30px; } #TenantProfiles .reminders{ border: 1px solid #CCCCCC; border-radius: 5px; } div#tenant-reminders p{ margin: 0; padding: 4px 0px; font-size: 16px; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } div#tenant-reminders .date, div#tenant-reminders .subject, div#tenant-reminders .copy { font-size: 16px; margin: 10px 0px; color: #555555; height: 30px; } div#tenant-reminders .date, div#tenant-reminders .subject { font-weight: 600; } .loader { border: 4px solid #f3f3f3; /* Light grey */ border-top: 4px solid #3498db; /* Blue */ border-radius: 50%; width: 30px; height: 30px; animation: spin 2s linear infinite; margin: auto; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .container-fluid .row .content { padding: 0; /*//margin-bottom: 10px;*/ } .container-fluid .row .clickable-row { cursor: pointer; transition: background 400ms ease-out; } .container-fluid .row .clickable-row:hover { background-color: #f4f4f4; } .container-fluid .row .delete { height:50px; vertical-align: middle; text-align: center; line-height: 48px; } .container-fluid .row .headings { padding: 25px 0px; font-weight: bold; line-height: 12px; } .container-fluid .row .headings div { padding: 0 25px; } .container-fluid .row .content .start-content, .container-fluid .row .content .middle-content, .container-fluid .row .content .end-content { height: 50px; padding: 5px 25px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; vertical-align: middle; line-height: 38px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .container-fluid .row .content .start-content { border-left: 1px solid #ccc; -webkit-border-top-left-radius: 5px; border-top-left-radius: 5px; -webkit-border-bottom-left-radius: 5px; border-bottom-left-radius: 5px; } .container-fluid .row .content .middle-content { } .container-fluid .row .content .end-content { border-right: 1px solid #ccc; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; border-bottom-right-radius: 5px; } body#MaintenanceReports .confirmBox, body#Templates .confirmBox { min-width:500px; width:500px; height:200px; margin:auto auto; display:block; text-align:center; position:relative; background:#FEFEFE; border-top:10px solid #8dabd9; } body#MaintenanceReports .confirmBox .buttons, body#Templates .confirmBox .buttons { background:#F2F2F2; border-top:1px solid #CCCCCC; } body#MaintenanceReports .confirmBox .buttons a, body#Templates .confirmBox .buttons a { background:#3a383d; color:#EEE; border-radius:5px; height:40px; line-height:40px !important; width:30%; text-align:center; } body#MaintenanceReports .confirmBox .buttons .actionButton, body#Templates .confirmBox .buttons .actionButton { background:#8dabd9; width:30%; border:none; border-radius:5px; color:#EEE; min-height:40px; } body#MaintenanceReports .confirmBox h3, body#Templates .confirmBox h3 { margin-top:0; top:calc( 50% - 48.5px ); position:absolute; left:0px; width:100%; } body#MaintenanceReports .confirmBox .buttons, body#Templates .confirmBox .buttons { padding:10px !important; position:absolute; bottom:0px; width:100%; } body#Templates .confirmBox .buttons { display: block; } body#MaintenanceReports .confirmBox .buttons { display: flex; } body#MaintenanceReports .confirmBox .buttons a, body#Templates .confirmBox .buttons a { display:inline-block; margin:0 10px; } body#LandlordContacts .confirmBox .buttons input.actionButton { background: #3a383d; } body#Properties form h2, body#Properties form h3{ font-size: 16px; font-weight: bold; } select#academicYear { width: 100%; } a.btn.actionBtn { min-width:120px; height:36px; border-color:#8dabd9; background-color:#8dabd9; } #fileLink a.download { position: absolute; right: 0; margin: 10px 15px; } input.fit-content.actionButton { width: fit-content; } .col-xs-11.content.clickable-row { margin-bottom: 10px; } .btn-group, .btn-block{ margin-bottom: 20px; } .breadcrumb { background: #fff; margin: 0; padding-left: 0; } ol.breadcrumb li a{ display: inline !important; } .breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: "/\00a0"; }