/* Hoteleia: Modals Global Base */ .modal-toggler { display: none; } .toggle-modal-button { background-color: transparent; display: inline-block; cursor: pointer; border:none; } .modal-container { background: rgba(27,50,95, .75); opacity: 0; color: white; width: 100%; height: 100%; position: fixed; top: 0; left: 0; visibility: hidden; transition: opacity .5s, visibility 0s linear .6s; z-index: 5000; .modal-toggler:checked + & { opacity: 1; visibility: visible; transition: opacity .5s; } .modal { position: relative; top: 50%; left: 50%; border-radius:4px; transform: translateX(-50%) translateY(-50%); color:$textColor12; box-shadow: 0 12px 15px 0 rgba(0,0,0,0.25); &.close-modal-area { width: 100%; height: 100%; } &.modal-box { background-color:$textColor6; text-align: center; } .content & { width: 100%; /*max-width: 40em;*/ } .toggle-modal-button { color:$textColor6; margin:0; } .modal-head { overflow:hidden; background-color:$backgroundColor4; border-bottom:5px solid $backgroundColor9; color:#ffffff; padding:10px; border-radius: 4px 4px 0px 0px; text-align:left; position:relative; font-weight: 300; font-size: 18px; line-height:30px; line-height: 1.1; .fa-times { position:absolute; top:10px; right:10px; font-size:16px; height:16px; color:$textColor6; } } .modal-body { padding:20px; position:relative; } } } .login { width:400px; /*padding:20px;*/ .form_social { /*margin-bottom:10px;*/ span { font-size:12px; text-align:center; display:block; padding-bottom:5px; } .form_social_icons { background-color:#cecece; border-radius:4px; overflow:hidden; padding:15px; .social_button { width:33.333333%; float:left; .social_icon { margin:5px; background-color:#282828; border-radius:4px; padding:10px; padding-bottom:6px; text-align:center; color:#fff; font-size:20px; a { color:#fff; } } .facebook { border-bottom:4px solid #3a558e; } .facebook:hover { background-color:#3a558e; } .twitter { border-bottom:4px solid #4099ff; } .twitter:hover { background-color:#4099ff; } .google { border-bottom:4px solid #d34836; } .google:hover { background-color:#d34836; } .yahoo { border-bottom:4px solid #7b0099; } .yahoo:hover { background-color:#7b0099; } } } } form { position:relative; z-index:3000; } .has-error { input { background-color:lighten($backgroundColor5,30%); } .help-block{ background-color:$backgroundColor5; border-radius:4px; color:$textColor6; font-size:12px; padding:10px; margin-bottom:10px; display:inline-block; strong { font-weight:300; } } } p { text-align:center; margin-top:10px; margin-bottom:10px; font-style:italic; } label { display:block; margin-bottom:5px; margin-top:10px; text-align:left; } input { padding:10px; width:100%; font-size:0.8rem; border:none; color:$textColor10; border-radius: 4px; position:relative; background-color:$backgroundColor3; margin-bottom:10px; } .remember-forgot { overflow:hidden; margin-top:10px; margin-bottom:10px; font-size:13px; .col1 { float:left; margin-right:10px; } .col2 { float:left; } .col3 { float:right; } input { width:initial; display:inline-block; } } button { padding:10px; width:100%; font-size:0.8rem; background-color:$backgroundColor2; border:none; color:$textColor6; border-radius: 4px; transition: background-color 0.5s ease; cursor:pointer; text-transform: uppercase; text-align:left; } button:hover { background-color:darken($backgroundColor2, 10%); transition: background-color 0.5s ease; } } .compareHotelsModal { width:70%; overflow:auto; .modal-head { i { padding:initial !important; background-color:initial !important; color:$textColor6 !important; } } .propertyheader { .propertytype { text-transform:uppercase; font-weight:300; font-size:10px; display:inline-block; margin-bottom:5px; color:lighten($textColor12, 10%); } h4 { font-size: 18px; font-weight: 300; } } .fa-check { background-color:#8ACB75; display:inline-block; padding:10px; border-radius:4px; color:#207D29; } .fa-times { background-color:#EEEEEE; display:inline-block; padding:10px; border-radius:4px; color:#939393; } table { margin: 0; background-color: transparent; table-layout: auto; border: 1px solid #f1f1f1; font-size: .75rem; } table thead tr th, table tfoot tr th, table tbody tr td, table tr td, table tfoot tr td { border-right: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1; } table td { padding: .5rem; vertical-align: middle; } .leftColumn { text-align:left; font-size: .9rem; background-color: #f6f6f6; } }