.centered { text-align: center; }
/* Custom fonts */
@font-face {
    font-family:font1;
    src:url(/mobile/reg/fonts/SourceSansPro-Regular.otf);
    src:url(/mobile/reg/fonts/SourceSansPro-Regular.otf) format('opentype');
}
/* Page header */
header {
    display: flex; height: 76px;
}
header #title {
    font-size: 48px; font-family: font1; font-weight: 700; 
    text-align: center; color: #fff;
    flex-grow: 1; padding-top: 5px;
    text-transform: uppercase;
}
header a.home, header a.logout {
    color: #fff;
    display: flex; align-items: center;
    position: absolute; right: 2%;
    height: 76px;
}
header a.logout {
    left: 2%;
    width: 50px;
}
@media ( max-width: 524px ){
    header, header a.home, header a.logout {
        height: 45px;
    }
    header #title {
        font-size: 25px;
    }
}
/* Branding */
header, .btn-primary{
    background-color: #2c539e; color: #fff; border-color: #2c419e;
}
.btn.btn-danger {
    background-color: #e92d41; color: #fff; border-color: #e92d41;
}
/* Input styles */
.input-group-btn img {
    padding: 20%; height: 100%; max-height: calc( 2px + 4rem );
    border: 1px solid #ccc; border-right: 0px; 
    border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem;
}
/* hebrew*/
.input-group-btn-he img {
    padding: 20%;
    height: 100%;
    max-height: calc( 2px + 4rem );
    border: 1px solid #ccc;
    border-left: 0px;
    border-top-right-radius: 0.3rem;
    border-bottom-right-radius: 0.3rem;
}
.input-group select:not(:first-child), .input-group input:not(:first-child) {
    border-left: 0px;
}

.input-group-he select:not(:first-child), .input-group input:not(:first-child) {
    border-right: 0px;
}


form {
    margin: 10px auto;
}
form select.form-control, 
form input.form-control, 
form .btn,
.navigation .btn {
    height: calc( 2px + 4rem ) !important;
    font-size: 1.5em;
}
form .row, form .col-xl-6 {
    margin-bottom: 10px;
}
    form input[type="submit"], form a.btn, button[type="submit"] {
        width: 100%;
    }
form a.btn {
    display: flex; align-items: center; justify-content: center;
}
img#user-img {
    border-radius: 50%;
    border: 1px solid;
    height: 125px;  width: 125px;
}
/* Resize the form on mobile */
@media( max-width: 440px ){
    form select.form-control, 
    form input.form-control, 
    form .btn,
    .navigation .btn {
        height: calc( 2px + 2.5rem ) !important;
        font-size: 1em;
    }
    .input-group-btn img {
        max-height: calc( 2px + 2.5rem );
        padding: 15%;
        width: 60px !important;
    }
}
/* Branded Radios and Checkboxes */
.radio-label input[type='radio'], input[type="checkbox"] { display: none; }
.radio-label span.radio, span.checkbox {
    background: url("/mobile/img_new/circle-color-blue-svg.svg"); background-size:cover; 
    height: 25px;width: 25px;display:inline-block;transition: transform .1s;
}
.radio-label input:checked + span.radio {
    background: url("/mobile/img_new/circle-check-color-svg.svg"); background-size:cover; 
}
span.checkbox {
    background: url("/mobile/img_new/square-color-blue-svg.svg");
}
input:checked + span.checkbox {
    background: url("/mobile/img_new/square-check-color-blue-svg.svg"); background-size:cover;
}
.radio-label input:hover + span.radio, input:hover + span.checkbox {
    cursor: pointer;
}
.radio-label + span {
    vertical-align: top;
}

/* Error Modal */
#errorModal .modal-header, #error2Modal .modal-header {
    background: #e92d41;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    color: #fff;
}
#errorModal .close, #error2Modal .close {
    color: #fff;
    opacity: .8;
}
#errorModal .close:hover, #errorModal .close:hover {
    color: #fff;
    opacity: 1;
}
#errorModal .modal-body, #errorModal .modal-body {
    text-align: center; font-size: 1.5em;
}

/* success modal  */
svg#circle-compleate{
    max-width: 75px;
}
#successModal div.alert {
    display: none;
}
p#success {
    margin-top: 10px; color: #73af55; font-size: 1.3em;
}

/* animated circle */
.path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 0;
}
.path.circle {
    -webkit-animation: dash 0.9s ease-in-out;
    animation: dash 0.9s ease-in-out;
}
.path.check {
    stroke-dashoffset: -100;
    -webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
    animation: dash-check 0.9s 0.35s ease-in-out forwards;
}

/* animate the checkmark */
@-webkit-keyframes dash {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}
@keyframes dash {
    0% { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}
@-webkit-keyframes dash-check {
    0% { stroke-dashoffset: -100; }
    100% { stroke-dashoffset: 900; }
}
@keyframes dash-check {
    0% { stroke-dashoffset: -100; }
    100% { stroke-dashoffset: 900; }

}