/* Form Containers */
form { margin: 0px; }
div.form {
    position: relative;
    width: 100%;
    padding: 5px 15px !important;
}

div.form > div:first-child { padding-top: 3px; }
div.form h4 { color: #B71B1C; }
div.sectend:not(:last-child) { border-bottom: 1px dotted #cfd8dd; }
main div.details { padding: 0px inherit; }
div.details > div {
    border: 1px solid #cfd8dd;
    border-radius: 5px;
    padding-left: 40px;
    background: -moz-linear-gradient(90deg, #cfd8dd 0px,#cfd8dd 40px,White 40px);
    background: -webkit-linear-gradient(90deg, #cfd8dd 0px,#cfd8dd 40px,White 40px);
    background: linear-gradient(90deg, #cfd8dd 0px,#cfd8dd 40px,White 40px);
}
div.details > div > div { padding: 8px 12px; }
div.formlabel {
    white-space: nowrap;
    word-wrap: none;
}
div.form h5, div.details h5 { color: #B71B1C; }
div.details h6 { padding: 6px 8px 0px 12px; }
div.formitem, div.formerror {
    padding-top: 12px;
    line-height: 100%;
}
div.formcontrol {
    min-height: 32px;
    position: relative;
}
div.formcontrol { line-height: 36px; } 
div.formerror { display: none; }
div.error picture:before { content: "\f071"; }
div.formitem:after, div.formerror:after {
    content: "";
    display: table;
    clear: both;
}
div.form div.buttons {
    text-align: right;
    padding-top: 15px;
}
line.dotted_grey {
    width: 100%;
    display: inline-block;
    border-top: 1px dotted #B0BFC6;
    padding-bottom: 15px;
}
div.nopad { padding: 0px !important; }
div.nopadtop { padding-top: 0px !important; }
p.sml_grey {
    font-weight: normal;
    margin: 0px 0px 0px 28px;
}
ul.sml_grey {
    font-weight: normal;
    margin: 0px 0px 0px 18px;
}

@media (max-width: 800px) {
    div.formcontrol { width: 100%; }
    div.formlabel {
        width: 100%;
        text-align: left;
        font-size: 0.9em;
        padding: 0px 0px 3px 0px;
    }
    div.formitem div.ver { padding: 4px 0px 0px 32px; }
    div.formnolabel { display: none; }
    img.infoicon {
        cursor: pointer;
        vertical-align: -6px;
        margin-left: 7px;
        width: 24px;
        height: 24px;
    }  
}
@media (min-width: 801px) {
    div.formcontrol {
        float: left;
        width: 75%;
    }
    div.formlabel {
        float: left;
        width: 25%;
        text-align: right;
        font-size: 12pt;
    }
    div.formitem div.formlabel { padding: 11px 8px 0px 0px; }
    div.formlabel:after { content: ":"; }
    div.formnolabel {
        float: left;
        width: 25%;
        padding: 11px 8px 0px 0px;
    }
    img.infoicon {
        cursor: pointer;
        vertical-align: -6px;
        margin-left: 7px;
        width: 22px;
        height: 22px;
    }
    div.form div.buttons { border-radius: 0px 0px 5px 5px; }
}

/* Form Elements */
input[type=text], input[type=password], textarea, input[type=browse] {
    padding: 7px;
    border: 1px solid #B0BFC6;
    border-radius: 4px;
    resize: vertical;
    font-size: 11pt;
    font-family: Montserrat;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    color: #35474F;
}
input[type=text], input[type=password], input[type=browse] { height: 36px; }
input[type=text]:disabled, input[type=password]:disabled, textarea:disabled, select:disabled {
    color: #536D7A;
    background-color: #f5f5f5;
    cursor: default;
}
input[type="checkbox"], input[type="radio"] { display: none; }
input[type="checkbox"] + label, input[type="radio"] + label {
	 display: inline-block;
	 margin: -3px 8px 0px 0px;
	 vertical-align: middle;
	 cursor: pointer;
     background-color: transparent;
}
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label { cursor: default; }
input[type="checkbox"]:checked + label {
    background: url('/images/tick1.svg') left top no-repeat;
    background-size: 22px 22px;
}
input[type="checkbox"] + label {
    width: 22px;
    height: 22px;
    background: url('/images/tick0.svg') left top no-repeat;
    background-size: 22px 22px;
}
input[type="checkbox"].switch + label {
	width: 40px;
	height: 18px;
	background: url('/images/switch0.svg') left top no-repeat;
	background-size: 40px 18px;
}
input[type="checkbox"].switch:checked + label {
	background: url('/images/switch1.svg') left top no-repeat;
	background-size: 40px 18px;
}
input[type="color"] {
    padding: 3px 5px;
    border: 1px solid #B0BFC6;
    border-radius: 4px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: White;
    height: 36px;
    width: 100px;
    cursor: pointer;
}
div.listbox {
    border-radius: 4px;
    border: 1px solid #B0BFC6;
    cursor: default;
    background-color: White;
    overflow-y: auto;
    line-height: 140%;
    font-size: 11pt;
    padding: 6px 7px;
    min-height: 36px;
}
div.disabled {
    color: #536D7A;
    background-color: #f5f5f5;
    cursor: default;
}
div.listbox ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    font-size: 11pt;
}
div.listbox ul li { padding: 2px 10px 0px 10px; }
div.listbox ul li.line { border-bottom: 1px dotted #CFD8DD; }
div.listbox ul li.hidden { display:none; }
div.listbox picture {
    font-size: 15pt;
    margin: 0px 8px 0px 4px;
    vertical-align: -1px;
    color: #536D7A;
}
input.datepicker, input[type=browse], input.filename, input.galimage {
    -webkit-border-radius: 2px;
    -webkit-padding-end: 20px;
    -webkit-padding-start: 2px;
    border-radius: 4px;
    background-color: White;
    background-position: right;
    background-repeat: no-repeat;
    background-size: 32px auto;
    overflow: hidden;
    padding: 5px 37px 5px 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
}
input.datepicker { background-image: url('/images/select_arr128.svg'); }
input[type=browse], input.filename, input.galimage { background-image: url('/images/select_arr128.svg'); }
input.filename {
    background-image: url('/images/select_dot128.svg');
    cursor: pointer;
}
div.selimg, div.imgupload {
    background-color: White;
    background-position:  right;
    background-repeat: no-repeat;
    background-size: 32px auto;
    padding: 7px 39px 7px 7px;
    border: 1px solid #B0BFC6;
    border-radius: 4px;
    width: 160px;
    height: 72px;
    cursor: pointer;
    text-align: center;
}
div.selimg { background-image: url('/images/select_arr128.svg'); }
div.imgupload { background-image: url('/images/select_dot128.svg'); }
div.selimg img.defimg, div.imgupload img.defimg {
    width: auto;
    height: 56px;
}
div.selimg_dd {
    background-color: White;
    border: 1px solid #B0BFC6;
    border-radius: 4px;
    overflow-x: hidden;
    overflow-y: auto;
    white-space: nowrap;
    display: none;
    max-height: 119px;
}
div.selimg_dd div {
    display: grid;
    grid-gap: 12px;
    grid-template-columns: repeat(5, 1fr);
    padding: 12px;
    border-bottom: 1px dotted #b0bfc6;
}
div.selimg_dd div img {
    width: auto;
    cursor: pointer;
}
#url_deeplink {
    white-space: nowrap;
    overflow-x: auto;
}
input:not(:disabled):hover, select:not(:disabled):hover, textarea:not(:disabled):hover, input[type="checkbox"]:not(:disabled) + label:hover, div.search-filter:hover, input[type="radio"]:not(:disabled) + label:hover { box-shadow: 0px 0px 10px 0px #536d7a75; }

@media (max-width: 800px) {
    input[type=text], input[type=password], textarea, input[type=browse], div.formbox, div.inputval, div.listbox, div.butml, div.selimg_dd, input[type=range], #url_deeplink { width: 100%; }
    input[type="radio"] + label {
        width: 22px;
        height: 22px;
    }
    input[type="radio"] + label {
        background: url('/images/radio0.svg') left top no-repeat;
        background-size: 22px 22px;
        background-color: transparent !important;
        border-radius: 11px;
    }
    input[type="radio"]:disabled + label {
        background: url('/images/radio0off.svg') left top no-repeat;
        background-size: 22px 22px;
    }
    input[type="radio"]:checked + label {
        background: url('/images/radio1.svg') left top no-repeat;
        background-size: 22px 22px;
        background-color: transparent !important;
        border-radius: 11px;
    }
    input[type="radio"]:checked:disabled + label {
        background: url('/images/radio1off.svg') left top no-repeat;
        background-size: 22px 22px;
    }
    input[type=text].tip, input[type=password].tip, input[type=browse].tip {
        width: -moz-calc(100% - 34px);
        width: c-webkit-calc(100% - 34px);
        width: -o-calc(100% - 34px);
        width: calc(100% - 34px);
    }
}
@media (min-width: 801px) {
    input[type=text], input[type=password], textarea, input[type=browse], div.formbox, div.inputval, div.listbox, div.butml, div.selimg_dd, input[type=range], #url_deeplink { width: 75%; }
    input.halfwidth { width: 37%; }
    input[type="radio"] + label {
        width: 20px;
        height: 20px;
    }
    input[type="radio"] + label {
        background: url('/images/radio0.svg') left top no-repeat;
        background-size: 20px 20px;
        background-color: transparent !important;
        border-radius: 10px;
    }
    input[type="radio"]:disabled + label {
        background: url('/images/radio0off.svg') left top no-repeat;
        background-size: 20px 20px;
    }
    input[type="radio"]:checked + label {
        background: url('/images/radio1.svg') left top no-repeat;
        background-size: 20px 20px;
        background-color: transparent !important;
        border-radius: 10px;
    }
    input[type="radio"]:checked:disabled + label {
        background: url('/images/radio1off.svg') left top no-repeat;
        background-size: 20px 20px;
    }
}

/* Tips */
div.tips {
	background-color: #273238;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: absolute;
	z-index: 98;
	top: 0px;
	left: 0px;
    font-size: 10pt;
    line-height: 140%;
	padding: 7px 45px 8px 10px;
	color: White;
	max-width: 300px;
	display: none;
	text-align: justify;
}
div.tips img {
	top: 12px;
	right: 12px;
	width: 24px;
	height: 24px;
	position: absolute;
	cursor: pointer;
}
div.tips:before {
    content: "";
    display: block;
    width: 0px; 
    height: 0px; 
    border-left: 8px solid transparent;
	border-right: 8px solid transparent;
    border-bottom: 10px solid #273238; 
    position: absolute;
    top: -10px;
}
div.tipsl:before { right: 25px; }
div.tipsc:before { right: 46%; }
div.tipsr:before { left: 11px; }

/* Error Messages */
div.error {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: White;
	background-color: #B71B1C;
    position: relative;
    font-family: Montserrat;
    font-size: 11pt;
    padding: 8px 10px;
    float: left;
}
div.error picture:before {
    content: "\f071";
    font-size: 13pt;
    margin-right: 8px;
    vertical-align: middle;
}
div.error:not(div.list div.error):before {
    content: "";
    display: block;
    width: 0px; 
    height: 0px; 
    border-left: 8px solid transparent;
	border-right: 8px solid transparent;
    border-bottom: 10px solid #B71B1C; 
    position: absolute;
    top: -9px;
    left: 25px;
}

/* Slider */
.slider {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    height: 8px;
    border-radius: 4px;  
    background-color: #B0BFC6;
    -webkit-transition: .2s;
    transition: opacity .2s;
    margin-top: 16px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%; 
    background-color: #B71B1C;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #B71B1C;
    cursor: pointer;
}

/* Captcha */
div.captcha {
    display: inline-block;
    position: relative;
    padding-right: 24px;
}
div.captcha a {
    position: absolute;
    right: 0px;
    top: 2px;
}
div.captcha > img {
    border: 1px solid #B0BFC6;
    border-radius: 4px;
}
div.captacha a img { color: #273238; }

/* Tabbed Textbox */
@media (max-width: 800px) {
    div.tabcontainer { width: 100%; }
}
@media (min-width: 801px) {
    div.tabcontainer { width: 75%; }
}
div.tabs {
    display: grid;
    grid-auto-flow: column;
}
div.tab {
    padding: 6px 5px 4px 5px;
    cursor: pointer;
    font-size: 9pt;
    line-height: 100%;
    text-align: center;
    border-top: 1px solid #B0BFC6;
    border-bottom: 1px solid #B0BFC6;
    border-left: 1px solid #B0BFC6;
}
div.tab:first-child { border-radius: 4px 0 0 0; }
div.tab:last-child {
    border-radius: 0 4px 0 0;
    border-right: 1px solid #B0BFC6;
}
div.active {
    background-color: White;
    border-bottom: 0px;
}
div.tab img {
    height: 15px;
    width: 23px;
    margin-bottom: 3px;
    border: 1px solid #273238;
}
div.tabcontainer textarea {
    border-top: 0px;
    border-radius: 0 0 4px 4px;
    width: 100%;
    display: none;
}
div.tabcontainer #tab_text_1 { display: block; }