/* CONTENT */ .main-content { width: 100%; padding: 0 0 50px; } #main-form { padding:20px;border-radius:5px; } .mb-0 { margin-bottom:0px !important; } .mt-20 { margin-top:20px; } #main-form .link { color:#0083b9;text-decoration:none;border-bottom:none !important; } #main-form div.textbox a, #popup a { color:#0083b9;text-decoration:none; } #main-form div.textbox a:hover, #main-form .link:hover, #popup a:hover { text-decoration:underline; } #main-form div.textbox img { max-width:100%; } /***** FORM *****/ .form-title-image img { margin:20px auto;max-width:100%; } h2.form-title { font-size:20px; margin:30px 0; } h3.form-title { font-size:18px; margin:40px 0 20px; } .form-container { margin: 0 auto;padding-top: 20px;width: 100%;max-width:650px; } .form-container .form-group { margin-bottom: 20px; } .form-container .form-group .col-2 { width:16%;margin-right:1%;float:left; margin-bottom: 20px; } .form-container .form-group .col-10 { width:83%;float:left; margin-bottom: 20px; } .form-container .form-group .col-4 { width:33%;margin-right:1%;float:left; margin-bottom: 20px; } .form-container .form-group .col-8 { width:66%;float:left; margin-bottom: 20px; } .form-container .form-group .col-6 { width:49%;margin-right:1%;float:left; margin-bottom: 20px; } .form-container .form-group .col-6:last-child { margin-right: 0% !important; } .form-container .form-group .col-12 { margin-bottom: 20px; } .form-container .form-group .col-12:last-child { margin-bottom: 0 !important; } #popup .col-4 { width:33%;margin-right:1%;float:left; } #popup .col-8 { width:66%;float:left; } #popup .col-8 + .col-4 { margin-right:0; } #popup .helpPopup .content { padding:30px;min-height: 50px;overflow-wrap: break-word; } #popup .selectAction .content { min-height: 38px;padding:30px 20px; } #popup .selectAction .buttonLine button { width:48%;margin: 0; } #popup .selectAction .buttonLine button.btn-green { background-color: #3ebb60 !important; } #popup .selectAction .buttonLine button.btn-green:hover { background-color: #38a856 !important; } #popup .selectAction .buttonLine button.btn-red { background-color:#dc5655 !important; } #popup .selectAction .buttonLine button.btn-red:hover { background-color:#c64d4c !important; } .form-group label { display: inline-block; margin-bottom: .5rem; } .left-labels .form-group .col > label { display:inline-block;width:23%;margin-right:2%;text-align:right; } .left-labels .optionList, .left-labels table, .left-labels .stars-rating-stars { width:75%;float:right; } .left-labels li .form-group[data-type="checkbox"] .col::after, .left-labels li .form-group[data-type="radio"] .col::after, .left-labels li .form-group[data-type="table"] .col::after, .left-labels li .form-group[data-type="tickets"] .col::after, .left-labels li .form-group[data-type="stars"] .col::after { content:'';clear:both;display:block; } .form-group label .star, #addNew label .star { color: #e72724; } .form-group p { line-height:1.5rem; } .form-group.additionalDesc p { line-height:1rem;font-size:12px;margin-left:25%; } .form-subtitle { margin-bottom: 22px; font-size: 20px; color: #354751; font-weight: 300; } .input-btns { display: block; text-align: right; margin-top: 5px;} .input-btns li, .input-btns .icon, .ic { display: inline-block; width: 19px; height: 20px; background: url('../img/icons.png') no-repeat; cursor: pointer; } .ic.hidden { display: none; } .input-btns .icon-up, .input-btns .icon-down {margin-right:5px; } .input-btns .icon-help, .input-btns .icon-optgroup, .ic.icon-help { width: 16px; height: 19px; margin-right:5px; } .input-btns .icon-add-n, .input-btns .icon-order-asc, .input-btns .icon-order-desc, .input-btns .icon-display { margin-left:5px; } .input-btns .icon-add, .ic.icon-add { background-position: -37px -389px; } .input-btns .icon-add-n { background-position: -205px -389px; } .input-btns .icon-remove, .ic.icon-remove { background-position: -79px -389px; } .input-btns .icon-up { background-position: -163px -389px; } .input-btns .icon-down { background-position: -184px -389px; } .input-btns .icon-help, .ic.icon-help { background-position: -84px -369px; } .input-btns .icon-optgroup { background-position: -170px -369px; } .input-btns .icon-optgroup.active { background-position: -202px -369px; } .input-btns .icon-order-asc { background-position: -247px -389px; } .input-btns .icon-order-desc { background-position: -289px -389px; } .input-btns .icon-display { background-position: -331px -389px; } .input-btns .icon-add:hover, .ic.icon-add:hover { background-position: -58px -389px; } .input-btns .icon-add-n:hover { background-position: -226px -389px; } .input-btns .icon-remove:hover, .ic.icon-remove:hover { background-position: -100px -389px; } .input-btns .icon-up:hover { background-position: -121px -389px; } .input-btns .icon-down:hover { background-position: -142px -389px; } .input-btns .icon-help:hover, .ic.icon-help:hover { background-position: -100px -369px; } .input-btns .icon-optgroup:hover { background-position: -186px -369px; } .input-btns .icon-optgroup.active:hover { background-position: -218px -369px; } .input-btns .icon-order-asc:hover { background-position: -268px -389px; } .input-btns .icon-order-desc:hover { background-position: -310px -389px; } .input-btns .icon-display:hover { background-position: -352px -389px; } .icon-help.callPopup { margin-left: 6px;z-index:180;position:relative; } .optionLine .icon-help.callPopup { margin-left: 6px; margin-top: 3px; } .form-group.adminOnlyField, .form-group.readOnlyField, .form-group.disallowField { opacity:0.7; } .form-group.hiddenField { opacity:0.25; } .form-group.readOnlyField select[readonly], .form-group.readOnlyField label.custom-checkbox, .form-group.readOnlyField label.custom-radio, .form-group.readOnlyField input[type='checkbox'][readonly], .form-group.readOnlyField input[type='radio'][readonly] { pointer-events: none; } /***** Checkbox *****/ li:not(.selected) .col-two .optionList { flex-direction: column;flex-wrap: wrap; column-count: 2;column-gap: 0; } li:not(.selected) .col-two .optionList .optionLine { display:inline-block;width:50%;margin-bottom:5px; } li:not(.selected) .col-two .optionList .fillIn .form-control { width:75%; } /***** Stars *****/ .stars-rating-scale, .stars-rating-stars { display:block; height: 30px !important; } .stars-rating-stars .starList { float: left !important; } .stars-rating-stars .starList > input{ display:none; } .stars-rating-stars .starList > label { float:right;position: relative !important; width: 25px !important; font-size: 36px !important; color: rgba(0,0,0,.15) !important; cursor: pointer; background: none !important; visibility: hidden; height: 30px !important; } .stars-rating-stars .starList > label::before{ content: "\2606" !important; position: absolute; opacity: 1 !important; background: none !important; height: 20px !important; visibility: visible; } .stars-rating-stars .starList > label:hover:before, .stars-rating-stars .starList > label:hover ~ label:before { color: #0083b9 !important; content: "\2605" !important; } .stars-rating-stars .starList > input:checked ~ label:before{ color: #0083b9 !important; content: "\2605" !important; } /* CHKV2 .stars-rating-stars .starList > label { height: 24px; margin: 0; } .stars-rating-stars .starList > label:not(:first-child) { margin-left: 7px;} .stars-rating-stars:not(old){ width : 315px; height: 24px; overflow : hidden; vertical-align : bottom; } .stars-rating-stars:not(old) .starList { float:left; } .stars-rating-stars:not(old) .starList > input{margin-right: -100%;opacity: 0;} .stars-rating-stars:not(old) .starList > label{ display: block;float: right; position: relative; background: url('../img/icons.png') no-repeat -24px -120px; } .stars-rating-stars:not(old) .starList > label:before{ content : '';display: block; width: 24px; height: 24px; background: url('../img/icons.png') no-repeat -24px -96px; opacity: 0;transition: opacity 0.2s linear;} .stars-rating-stars:not(old) .starList > label:hover:before, .stars-rating-stars:not(old) .starList > label:hover ~ label:before, .stars-rating-stars:not(:hover) .starList > :checked ~ label:before{ opacity : 1; } */ /***** Table *****/ .table-form .rowColExtra select { padding: .35rem .25rem; } h4.previousTitle { margin-bottom:5px;font-size:11px; } .table-small th, .table-small td { height:20px !important;padding:2px 5px !important;font-size:11px; } .table-small .input-btns { margin-top:0;text-align:center; } /***** Video *****/ .video-container { width:100%;min-height:200px; } .video-container .empty { width:100%;height:200px;line-height:200px;box-sizing: border-box;-webkit-box-sizing: border-box;border: 1px solid rgba(0,0,0,.15);background-color: rgba(0,0,0,.02);border-radius: .25rem;text-align:center;color:#ccc; } /***** Divider *****/ /* .divider:not(.boxStyle) { position: relative; display: block; height: 17px; line-height: 17px; text-align: center; color: #b9b9b9; font-size: 12px; } .divider:not(.boxStyle):before { display: block; position: absolute; content: ''; width: 100%; top: 8px;height: 1px; background: #b3b3b3;z-index:50; } .divider:not(.boxStyle) span { display: inline-block; padding: 0 15px; background: #fff; position: relative;z-index:70; } */ .divider:not(.boxStyle) { display: flex; align-items: center;text-align: center;height: 17px; line-height: 17px; font-size: 12px;color:#0083b9 } .divider:not(.boxStyle)::before, .divider:not(.boxStyle)::after { content: '';flex: 1; border-bottom: 1px solid #0083b9; } .divider:not(.boxStyle):not(:empty)::before { margin-right: .25em; } .divider:not(.boxStyle):not(:empty)::after { margin-left: .25em; } .divider.boxStyle { display: block; text-align:center; background:#0083b9; color:#ffffff;padding:10px; } /***** Page Break *****/ .page-break { position: relative; display: block; height: 17px; line-height: 17px; text-align: center; color: #b9b9b9; font-size: 12px; } .page-break:before { display: block; position: absolute; content: ''; width: 100%; top: 8px;height: 1px; background: #b3b3b3; } .page-break span { display: inline-block; padding: 0 15px; background: #fff; position: relative; } /***** Drop zone *****/ .upload-drop-zone { text-align: center; position: relative; padding: 15px 10px; font-size: 14px; min-height: 16px; line-height: 16px; border-width: 1px;color: #9ca9b1;border-style: dashed; border-color: rgba(0,0,0,.15); font-weight: 300;cursor:pointer; } .upload-drop-zone:hover { background-color:#f8f8f8; } .upload-drop-zone:before { display: inline-block; content: ''; width: 20px; height: 16px; background: url('../img/icons.png') no-repeat -60px -350px; margin:0 5px;float:left;} .upload-drop-zone.drop { color: #222; border-color: rgba(87, 170, 240, 0.780392);} .upload-drop-zone.drop:before { background-position: -60px -330px; } .camera_btn { display:none; } .files_camera { min-height:51px; } .files_camera .upload-drop-zone, .files_camera .camera_btn { width:49%;height:50px; } .files_camera .upload-drop-zone { box-sizing:border-box; } .files_camera .camera_btn { min-width:auto;float:right;display:inline-block; } .statusbar { margin:5px 0; height:35px;padding:5px 0 10px;border-bottom:1px dashed #ccc; } .statusbar .filename { font-weight:bold;font-size:12px;padding-bottom:5px;float:left;height:20px;line-height:20px; } .statusbar .abort { width: 19px; height: 20px; background: url('../img/icons.png') no-repeat;background-position: -79px -390px;display:inline-block;float:right;cursor:pointer; } .statusbar .abort:hover { background-position: -100px -390px; } .statusbar .filesize { width:70px;height:20px;line-height:20px;display:inline-block;font-size:11px;float:right;text-align:right;padding-bottom:4px;margin-right:15px; } .statusbar .progressBar { height:4px;padding:0; } .statusbar .progressBar div { background-color:#0083b9;height:4px;line-height:22px;font-size:11px; } .file-list > li { display: block; min-height: 32px; line-height: 32px; font-size:14px; } .file-list > li:before { float: left; content: ''; margin-right: 15px; display: block; width: 32px; height: 32px; background: url('../img/icons.png') no-repeat; } .file-list > li:not(:first-child) { margin-top: 5px; } .file-list a, .file-list a:hover { color:#000;text-decoration:none; } .file-list .action-block { display: inline-block; float: right; width: 120px; height: 32px; } .file-list .action-block .input-btns { display: inline-block; float: right; margin: 0; } .file-list .action-block .input-btns li { margin-top: 5px; } .file-list .ppt:before { background-position: 0 -271px; } .file-list .doc:before { background-position: -32px -271px; } .file-list .pdf:before { background-position: -64px -271px; } .file-list .xls:before { background-position: -96px -271px; } .file-list .img:before { background-position: -128px -271px; } .file-list .edoc:before { background-position: -160px -271px; } .file-list .other:before { background-position: -192px -271px; } .file-list .ttf:before { background-position: -224px -271px; } .file-list .btn.small { margin-right:10px;min-width:auto;float:right;margin-top: 3px; } /***** Input *****/ .form-control { display: block;width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; color: #464a4c; background-color: #fff; background-image: none; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-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; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;box-sizing: border-box;-webkit-box-sizing: border-box; } textarea.form-control {max-width:100%;resize:vertical;min-height:2rem;} textarea.form-control.large {min-height:12rem;} .form-control.loader { background: #fff url('/media/system/img/loader.gif');background-size: 24px 24px;background-repeat: no-repeat;background-position: right 10px center; } .form-control:focus {color:#464a4c;background-color:#fff;border-color:#5cb3fd;outline:0} .form-control[readonly], .form-control[readonly]:focus { background-color:#edf2f5; } .form-control::-webkit-input-placeholder { color: #9ca9b1; } .form-control:-moz-placeholder { color: #9ca9b1; } .form-control::-moz-placeholder { color: #9ca9b1; } .form-control:-ms-input-placeholder { color: #9ca9b1; } .form-control::-ms-expand{background-color:transparent;border:0 } .table-small .form-control { padding:3px 5px;font-size:11px;line-height:1;text-align:right; } .left-labels .form-control, .left-labels .select2, .left-labels .google-map { display:inline-block;width: 75%;min-width: 75%;max-width: 75%; } .form-control.error { border-color:#dc5655; } .charactersLeft { margin-top:10px;font-size:11px;text-align:right;color:#666; } .nameName { display:block; } .nameName input { display:inline-block; } .nameName .greetingField { display:none; } .nameName.withGreeting .greetingField { width:23%;min-width:23%;max-width:23%;margin-right:2%;text-align:center;display:inline-block; } .nameName.withGreeting .greetingField + input { width:75%; } .left-labels .nameName { width:75%;display:inline-block; } .left-labels .nameName:not(.withGreeting) input { width:100%;min-width:100%;max-width:100%; } .table-form { background: #ffffff; } /***** Text *****/ .form-group [data-type="text"] ul, .textbox ul { list-style:circle;margin-left:20px; } .form-group [data-type="text"] ol, .textbox ol { list-style:number;margin-left:20px; } .textbox strong { font-weight: bold; } /***** Tickets *****/ .table-tickets tbody .rowPeriod { text-align:right; } .table-tickets .rowPeriod.active { font-weight:bold; } /***** Table *****/ .rowColCheck { width:24px;min-width:24px;max-width:24px; } .rowColCheck input[type="checkbox"] { display: none; } .rowColExtra .select2.form-control + .select2-container .select2-selection--single { height: 26px; } .rowColExtra .select2.form-control + .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 26px; } /***** Schedule *****/ .no_timeslots { padding: .65rem .75rem;text-align:center;border: 1px solid #dc5655;border-radius:.25rem;margin-top:1px;background-color:#ffb8b8;font-size: 14px; } .scheduleTimeSlots:not(.visible) { display:none; } .scheduleTimeSlots .rowColExtra { width:80px; } .hrsTitle .availableTimes { float:right; margin-left:20px; } /***** Select2 *****/ .select2-small { width: 100px; } .select2-dropdown { color: #344652; border-color: #5cb3fd; } .select2-container .select2-selection--single { height: 36px; border-color: rgb(177, 194, 201); outline: 0; } .select2-container.select2-container--open .select2-selection--single{border-color: #5cb3fd; } .select2-container .select2-selection--single .select2-selection__rendered { padding-right: 30px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 34px; color: inherit; } .select2-container--default .select2-selection--single .select2-selection__arrow { width: 30px; height: 100%; top: -1px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { width: 10px; height: 6px; border: 0; outline: 0; background: url('../img/icons.png') no-repeat -104px -432px; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { background-position: -104px -422px; } .select2-results .select2-results__options{ padding: 0 5px;font-size:0.8rem; } .select2-container--default .select2-results>.select2-results__options { overflow-x: hidden; } .select2-container--default .select2-results__option[aria-selected=true] { background: transparent; color: #0081bb; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: transparent; color: #000; } .select2.form-control + .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; } .select2.form-control + .select2-container .select2-selection--single { height: 45px; border-color: rgba(0,0,0,.15); } .col-6 .select2.form-control + .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 37px !important; } .col-6 .select2.form-control + .select2-container .select2-selection--single { height: 38px !important; } .select2-blue + .select2-container--default .select2-selection--single { background-color: #0083b9 !important; color: #fff; } .select2-blue + .select2-container--default .select2-selection--single .select2-selection__arrow b { background-position: -114px -432px; } /***** Multiple *****/ .multipleLineFields ul { margin-bottom:12px; } .multipleLineFields li { margin-bottom:5px; } .multipleLineFields input { width: calc(100% - 24px); } .multipleLineFields.ableSorting input { width: calc(100% - 55px); } .multipleLineFields .reorder, .multipleLineFields .remove { display:inline-block;width:16px;height:16px;float:right;margin-top:11px;margin-left:5px;background: url('../img/icons.png') no-repeat -119px -370px; } .multipleLineFields .reorder { background: url('../img/icons.png') no-repeat -151px -370px;margin-right:8px;float:left;cursor:move; } .multipleLineFields .remove { background: url('../img/icons.png') no-repeat -119px -370px;margin-left:8px;float:right;cursor:pointer; } .multipleLineFields .remove:hover { background-position:-135px -370px; } .multipleLineFields .blankLine { display:none; } /***** Error *****/ input[type="text"].fieldError, textarea.fieldError, select.fieldError { border-color:#dc5655; } /***** Terms and conditions *****/ .terms { font-size:11px;line-height:13px; } .terms .open, .terms .link { color:#000;text-decoration:underline;cursor:pointer; } .terms .open:hover, .terms .link:hover { text-decoration:none; } #detailedTerms { display:none; } .termsConditions p { line-height: 22px;margin-bottom: 10px; } .termsConditions p a { color:#000;text-decoration:underline;cursor:pointer; } .termsConditions p a:hover { text-decoration:none; } /***** Payments *****/ span.payVisaMaster, div.payVisaMaster span { display:inline-block;width:100px;height:24px;margin-left:6px;background: url('../img/cards-master-visa.png') no-repeat; } span.payVisaMaster { float:right; } div.payVisaMaster { margin-top:10px;text-align:right; } /***** Header *****/ #formHeaderButtons { margin-bottom: 10px;padding:0 20px; } #formHeaderButtons span { cursor:pointer;margin-top:3px;float:right;margin-left:5px; } #formHeaderButtons a { margin-left:5px; } /***** Powered *****/ #powered_by_mitto { font-size:11px; color:#ccc; height:20px; line-height:20px;margin-top: 20px; } #powered_by_mitto span { float:left; } #powered_by_mitto a { margin-left:8px; } /***** Blur *****/ #main-form li.blur { position:relative; } #main-form li.blur:before { content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:200; } /***** Checkbox / Radio / Icon *****/ .custom-control { position: relative;display: -webkit-inline-box;display: -webkit-inline-flex;display: -ms-inline-flexbox;display: inline-flex;min-height: 1.5rem;padding-left: 1.5rem;margin-right:0.5rem; cursor: pointer; } .custom-control-input { position: absolute;z-index: -1;opacity: 0; } .custom-control.custom-icon { padding-left: 40px; line-height: 1.6; } .custom-control.custom-radio, .custom-control.custom-checkbox, .custom-control.custom-star { min-height: 24px; line-height: 24px; padding-left: 36px; } .custom-control-icon { position: absolute; top: 0; left: 0; width: 24px; height: 24px; z-index:90; } .optionLine.optionGroup label { float: left;line-height: 24px;margin-right:10px;font-weight:bold; } .optionLine.optionGroupLeft { margin-left:36px; } .optionLine.optionGroup .custom-control { display:none; } li.selected div[data-type="checkbox"] .optionLine.optionGroup input.label-field, li.selected div[data-type="radio"] .optionLine.optionGroup input.label-field { margin-left:32px; } li.selected .optionLine.optionGroupLeft { margin-left:0 !important; } /* Checkbox */ .custom-checkbox .custom-control-icon { background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 3px;box-sizing:border-box;-webkit-transform-style: preserve-3d; } .custom-checkbox .custom-control-icon:after{ content: ""; position: absolute; display: none; left: 7px; top: 1px; width: 5px; height: 13px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg);-ms-transform: rotate(45deg); transform: rotate(45deg); } .custom-checkbox .custom-control-input:checked ~ .custom-control-icon{ background: #0083b9; border: 1px solid #0083b9; } .custom-checkbox .custom-control-input:checked ~ .custom-control-icon:after{ display: block; } /* Radio button */ .custom-radio .custom-control-icon{ background: #fff; border: 1px solid rgba(0,0,0,.15); border-radius: 20px;box-sizing:border-box; } .custom-radio .custom-control-icon:after{ content: ""; position: absolute; display: none;left: 6px; top: 6px; width: 10px; height: 10px; background: #fff; border-radius: 20px; } .custom-radio .custom-control-input:checked ~ .custom-control-icon{ background: #0083b9; border: 1px solid #0083b9; } .custom-radio .custom-control-input:checked ~ .custom-control-icon:after{ display: block; } .custom-checkbox .custom-control-input.fieldError:not(:checked) ~ .custom-control-icon, .custom-star .custom-control-input.fieldError:not(:checked) ~ .custom-control-icon, .custom-radio .custom-control-input.fieldError:not(:checked) ~ .custom-control-icon { border: 1px solid #e10000 !important; } .custom-control-input:disabled + .custom-control-icon { opacity:0.3; } .optionLine { display:block;min-height:35px; } .optionLine.hidden { display:none !important; } .optionLine .custom-control { float:left; } .optionLine.fillIn label { margin-top: 5px; } /* .optionLine .form-control { padding: 2px 10px; } */ li:not(.selected) .optionLine .custom-control { margin-right: 0; } .fillIn .custom-control-input { display:none; } .fillIn .form-control { width: 80%; } .fillIn input[disabled] { background-color:#f2f2f2; } .custom-icon-1 .custom-control-icon { background-position: 0 -48px; } .custom-icon-2 .custom-control-icon { background-position: -24px -48px; } .custom-icon-3 .custom-control-icon { background-position: -48px -48px; } .custom-icon-4 .custom-control-icon { background-position: -72px -48px; } .custom-icon-5 .custom-control-icon { background-position: -96px -48px; } .custom-icon-6 .custom-control-icon { background-position: -120px -48px; } .custom-icon-7 .custom-control-icon { background-position: -144px -48px; } .custom-icon-8 .custom-control-icon { background-position: -168px -48px; } .custom-icon .custom-control-input:checked~.custom-control-description { color: #309cd6; } .custom-icon-1 .custom-control-input:checked~.custom-control-icon { background-position: 0 -72px; } .custom-icon-2 .custom-control-input:checked~.custom-control-icon { background-position: -24px -72px; } .custom-icon-3 .custom-control-input:checked~.custom-control-icon { background-position: -48px -72px; } .custom-icon-4 .custom-control-input:checked~.custom-control-icon { background-position: -72px -72px; } .custom-icon-5 .custom-control-input:checked~.custom-control-icon { background-position: -96px -72px; } .custom-icon-6 .custom-control-input:checked~.custom-control-icon { background-position: -120px -72px; } .custom-icon-7 .custom-control-input:checked~.custom-control-icon { background-position: -144px -72px; } .custom-icon-8 .custom-control-input:checked~.custom-control-icon { background-position: -168px -72px; } #participant_list { margin-top: 10px; display: inline-block; width:100%; } #participant_list li { height: 70px; width: calc(50% - 27px); position: relative; margin-bottom: 10px; background-color: #fefefe; padding: 10px; border-radius: 5px; float:left; border: 1px solid rgba(0,0,0,.15); line-height: 22px; } #participant_list li:nth-child(2n) { margin-left: 10px; } #participant_list li span.no_image{ text-align: center; line-height: 70px; font-size: 25px; background-color: #0083b9; color:#fff; } #participant_list li span.no_image, #participant_list li img{ float:left; margin-right:10px; width: 70px; height: 70px; border-radius: 35px; } #participant_list li span.speaker_name{ width: calc(100% - 80px); display: block; float: left; text-align: left; } #participant_list li button{ position: absolute; bottom:7px; right:7px; } .form-container .form-group#fg-9066, .form-container .form-group#fg-9074, .form-container .form-group#fg-9073, .form-container .form-group#fg-9075 { display: none; } .fieldLoader { position:absolute;display:none;right:14px;top:31px;width:20px;height:20px;background:url('../img/loader.gif') no-repeat;background-size: 20px 20px; } .promoStatus { position:absolute;right:8px;top:30px;height:16px;line-height:16px;border-radius:4px;font-size:11px;padding:3px 8px;color:#fff; } .promoStatus:not(.visible) { display:none; } .promoStatus.correct { background-color: #3ebb60; } .promoStatus.incorrect { background-color: #dc5655; } .saveBtnLine { text-align:right; } #totalsBox div { text-align:right;height:30px;line-height:30px;font-size:16px;padding-bottom:5px; } #totalsBox div .sum { margin:0 5px 0 10px; } #totalsBox #totalsTotal{ font-size:20px; } #totalsBox #totalsTotal .sum { font-size:24px;color:#0083b9;font-weight:bold; } #countdownTimer { padding:40px 0; } #countdownTimer ul { margin:0 auto; max-width:400px; } #countdownTimer ul li { display:inline-block;width:21%;margin:0 2%;float:left;font-size:14px;text-align:center; } #countdownTimer ul li span { display:inline-block; width:100%;height:30px;line-height:30px;padding:20px 0;text-align:center;border-radius:5px;font-size:24px;background:#0083b9;color:#fff;margin-bottom:10px; } #countdownTimer .countdownRegister { width:100%;text-align:center;display:none; } .hrsTitle td { background-color: #0083b9; color: #fff !important;padding:4px 5px;cursor:pointer; } .hrsList { display:none; } .form-control.hidden{ display: none; } @media (max-width: 1024px) { #popup .selectAction .buttonLine button { width:100%; } #popup .selectAction .buttonLine button.btn-red { margin-top:10px; } } @media (max-width: 680px) { .form-container .form-group .col-4, .form-container .form-group .col-6, .form-container .form-group .col-8 { width:100% !important; max-width:100% !important;margin-right:0% !important;float:none;margin-bottom:20px !important; } } @media (max-width: 400px) { #totalsBox div { font-size:13px; } #totalsBox div .sum { width:100px; } #totalsBox #totalsTotal { font-size:16px; } #totalsBox #totalsTotal .sum { font-size:22px; } }