/**
 * Default CSS
 *
 * @package  Jamboree_2018
 * @developer  Maroun Melhem <http://maroun.me>
 *
 */
* {
    font-family: 'Montserrat', sans-serif !important;
}

*:focus {
    outline: none;
}

.hidden {
    display: none;
}

.clear {
    clear: both;
}

.kbd_holder{
    margin:10px 0;
}

.kbd_holder{
    color: #7A7A7A;
    font-size: 13px;
    font-style: italic;
}

.kbd {
    padding:0.1em 0.6em;
    border:1px solid #ccc;
    font-size:11px;
    font-family:Arial,Helvetica,sans-serif;
    background-color:#f7f7f7;
    color:#333;
    -moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    display:inline-block;
    margin:0 0.1em;
    text-shadow:0 1px 0 #fff;
    line-height:1.4;
    white-space:nowrap;
}

input[type="radio"]{
    margin-top:-1px;
}

.fade_effect {
    background-color: #26619F !important;
    color: #fff !important;
    border: 1px solid #26619F !important;

    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.fade_effect.red_effect {
    background-color: #D3313A !important;
    border: 1px solid #D3313A !important;

    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -o-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

#wrapper {
    position: relative;
    background: #205D9D; /* fallback for old browsers */
    background: -webkit-linear-gradient(to bottom, #D3313A, #205D9D); /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to bottom, #D3313A, #205D9D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    height: 100%;
    width: 100%;
    padding: 30px;
}

#wrapper .id_scout {
    display: block;
    margin: 20px auto !important;
    width: 100%;
    text-align: center;
}

#wrapper .id_scout p {
    margin: 0 0 0 5px;
    text-align: center;
    display: inline-block;
}

#wrapper .id_scout .form-group {
    margin: 0 0 10px 0;
}

#wrapper .paperlike_cont {
    background: #fff;
    box-shadow: /* The top layer shadow */ 0 -1px 1px rgba(0, 0, 0, 0.15),
        /* The second layer */ 0 -10px 0 -5px #eee,
        /* The second layer shadow */ 0 -10px 1px -4px rgba(0, 0, 0, 0.15),
        /* The third layer */ 0 -20px 0 -10px #eee,
        /* The third layer shadow */ 0 -20px 1px -9px rgba(0, 0, 0, 0.15);
    padding: 30px;
}

#wrapper .main_title {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    margin: 20px 0;
    color: #26619F;
}

#wrapper .main_sec_title {
    font-size: 25px;
    color: #26619F;
    margin: 30px 0;
}

#wrapper .main_sec_title.sec {
    border-top: 1px dashed #26619F;
    padding: 20px 0;
}

#wrapper .logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin: 0 auto;
}

#wrapper .jamb_logo {
    max-width: 100px;
}

#wrapper .sdl_logo {
    margin: 20px auto;
}

#wrapper .jamb_text {
    text-align: center;
    margin:20px 0;
}

#wrapper .jamb_text p{
    margin:0 0 10px 0;
    font-size:13px;
}

#wrapper .loader {
    width: 100%;
    display: inline-block;
    max-width: 25px;
    margin: 0 0px 5px 5px;
    vertical-align: bottom;
}

#wrapper .loader.get_group_unit_loader {
    margin: 0 0 0 5px;
    display: inline-block;
}

#wrapper .loader.save_fields_loader {
    float: right;
    margin: 4px 5px 0 0;
}

#wrapper .ajax_stuff .ajax_msg {
    display: inline-block;
}

#wrapper .form-group label {
    margin: 0 0 10px 0;
}

#wrapper .autofill {
    margin: 26px 0 0;
}

#wrapper .form-group {
    margin: 0 0 25px 0;
}

#wrapper .form-group .bootstrap-select {
    display: block;
    width: 100%;
}

#wrapper .custom-select select {
    font-weight: normal !important;
    font-size: 14px !important;
}

#wrapper .form-group .fade_effect #unite_id {
    color: #fff !important;
}

#wrapper .submit {
    float: right;
    margin: 0 15px 0 0;
}

/*popup styles*/
.mfp-container .mfp-content {
    width: 100%;
    max-width: 600px;
    padding: 100px 50px;
    border-radius: 5px;
    position: relative;
    color: #fff;
    background-color: #0099F7;
}

.mfp-container .mfp-content.error {
    background-color: #FB4646;
}

.mfp-container .mfp-content p {
    font-size: 19px;
    text-align: center;
    line-height: 30px;
}

.mfp-container .mfp-content button {
    color: #fff;
}

.mfp-close-btn-in .mfp-close {
    opacity: 1;
    color: #fff;
}

.copyrights {
    position: absolute;
    bottom: 6px;
    font-size: 13px;
    right: 0;
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    text-shadow: 1.2px 1.2px #000;
}

.copyrights a {
    text-decoration: underline;
    color: #fff;
}

#wrapper .export .export_method {
    text-align: center;
    margin: 50px 0;
}

#wrapper .export .export_load p.text {
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
    color: #E9573F;
}

#wrapper .export .export_load img {
    display: block;
    margin: 0 auto 20px;
}

#wrapper .password_form .pw_text {
    font-size: 16px;
    margin: 20px 0;
    text-align: center;
}

#wrapper .password_form input {
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

#wrapper .password_form input.btn {
    max-width: 100px;
    display: block;
    margin: 0 auto;
}

#wrapper .password_form input.redborder {
    border: 1px solid #D3313A;
}

.mobile_select {
    width: 100%;
}

.date_holder .picker__select--month, .picker__select--year {
    height: 3em;
}

/*Sections end*/
@media (max-width: 800px) {

    #wrapper {
        padding: 30px 10px;
    }

    #wrapper .container {
        padding: 0px;
    }

    #wrapper .logo {
        max-width: 120px;
    }

    #wrapper .main_title {
        font-size: 18px;
    }

    #wrapper .loader {
        display: block;
        margin: 10px auto;
    }

    #wrapper .form-group label {
        font-size: 14px;
    }

    #wrapper .autofill {
        margin: 0 auto;
        display: block;
        width: 100%;
        max-width: 120px;
    }
}