/*---------------*/
/*--- general ---*/
/*---------------*/
:root {
    --wmc-blue: #303F9C;
    --wmc-dark-gray: #333;
	--primary: #1C87DB;
	--success: #28A745;
	--warning: #FFC107;
	--danger: #DC3545;
	--light-gray: #EEE;
	--dark-gray: #444;
	--danger-hover: #CF3241;
	--warning-hover: #F2B807;
	--success-hover: #259940;
	--primary-hover: #1B81CF;
	--lighter-gray: #CCC;
    --darker-gray: #666;
}

* {
    box-sizing: border-box;
    font-family: Roboto, sans-serif;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

/*-----------------*/
/*--- container ---*/
/*-----------------*/
.container {
    
}

/*--- nav ---*/
.container .nav {
    background-color: var(--wmc-blue);
    padding: 1.2em 0;
}

.container .nav .brand {
    display: flex;
    justify-content: center;
    align-items: center;
}

.container .nav .brand img {
    width: 6em;
    border-radius: 0.2em;
}

/*--- main body ---*/
.container .main-body {
    padding: 1em;
}

.container .main-body h1 {
    font-size: 1.8em;
    font-weight: 400;
    text-align: center;
    color: var(--wmc-dark-gray);
    margin-bottom: 1em;
}

.container .main-body h3 {
    font-weight: 400;
    text-align: center;
    color: var(--wmc-dark-gray);
    margin-bottom: 1.4em;
}

.container .main-body .info {
    text-align: left;
}

.container .main-body .info p {
    font-size: 0.9em;
    margin-bottom: 0.4em;
    font-weight: 300;
}

.container .main-body .info ul,
.container .main-body .info ol {
    margin-left: 1.2em;
    margin-bottom: 1.2em;
}

.container .main-body .info ul {
    list-style: upper-alpha;
}

.container .main-body .info li {
    font-size: 0.9em;
    font-weight: 300;
    margin-bottom: 0.2em;
}

.container .main-body .btn-group {
    display: flex;
    
}

.container .main-body .main-btn:first-of-type {
    margin-right: 2em;
}

.container .main-body .main-btn {
    background-color: var(--wmc-blue);
    text-decoration: none;
    font-size: 0.9em;
    color: #FFF;
    font-weight: 300;
    padding: 0.8em 0;
    border-radius: 0.2em;
    display: block;
    text-align: center;
    border: none;
    width: 6em;
}



/*-------------------------*/
/*--- custom components ---*/
/*-------------------------*/

.label {
    order: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
    padding-right: 24px;
    align-self: center;
    width: 85%;
    color: #555;
}

.label .help-label,
.label .help-label a {
    font-size: 12px;
    color: #777;
    margin-top: 4px;
}

fieldset {
    border: 1px solid #CCC;
    border-radius: 0.2em;
    margin-bottom: 2em;
}

fieldset legend {
    text-align: center;
    padding: 0 1em;
    font-size: 1em;   
    font-weight: 300;
}
    
.radio,
.checkbox {
    background-color: #FFF;
    border-radius: 4px;
    padding-left: 10px;
}

.radio {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.2em;
}

.travel-purpose > .radio {
    display: block;
}

.travel-purpose .label {
    width: 8em;
}

.payment > .radio {
    display: block;
}

.radio > .radio-group {
    margin: 0.2em;
}

.radio .radio-group,
.checkbox .checkbox-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-right: 10px;
    border: 1px solid #CCC;
    padding: 0.4em; 
    border-radius: 0.2em;
}

.radio .radio-group input[type="radio"],
.checkbox .checkbox-group input[type="checkbox"] {
    display: none;
}

.radio .radio-group .custom-radio-btn {
    order: 2;
}

/*--- Radio Buttons ---*/
.radio .radio-group .custom-radio-btn {
    width: 24px;
    height: 24px;
    background-color: transparent;
    border: 2px solid #999;
    border-radius: 24px;
    transition: all .2s ease-in-out;
    align-self: center;
}

.radio .radio-group .custom-radio-btn:after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: transparent;
    border-radius: 14px;
    position: absolute;
    margin-top: 3px;
    margin-left: 3px;
    transition: all .2s ease-in-out;
}

.radio .radio-group input[type="radio"]:checked + .custom-radio-btn:after {
    content: '';
    width: 14px;
    height: 14px;
    background-color: #1C87DB;
    border-radius: 14px;
    position: absolute;
    margin-top: 3px;
    margin-left: 3px;
}

.radio .radio-group input[type="radio"]:checked + .custom-radio-btn {
    border-color: #1C87DB;
}


/*--- checkbox ---*/
form .ur-form-group .ur-checkbox {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding: 0.8em 1em;
    border: 1px solid var(--light-gray);
    border-radius: 4px;
    align-items: center;
}

form .ur-form-group .ur-checkbox-group {
    border: 1px solid var(--light-gray);
    border-radius: 4px;
}

form .ur-form-group .ur-checkbox-group .ur-checkbox {
    border: none;
    border-bottom: 1px solid var(--light-gray);
    border-radius: 0;
    width: 100%;
}

/*--- horizontal stacking only works in desktop mode ---*/
@media (min-width: 1024px) {
    form .ur-form-group .ur-checkbox-group-hor {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    form .ur-form-group .ur-checkbox-group-hor .ur-checkbox {
        border: none;
        border-right: 1px solid var(--light-gray);
        border-radius: none;
    }
}
/*------------------------------------------------------*/

form .ur-form-group .ur-checkbox-group .ur-checkbox:last-of-type {
    border: none;
}

form .ur-form-group .ur-checkbox .ur-label {
    display: flex;
    flex-direction: column;
    user-select: none;
}

form .ur-form-group .ur-checkbox .ur-label .ur-help-label {
    font-size: 0.8em;
    color: var(--darker-gray);
}

form .ur-form-group .ur-checkbox input[type="checkbox"] {
    display: none;
}

form .ur-form-group .ur-checkbox .ur-custom-checkbox {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    background-color: var(--lighter-gray);
    border-radius: 2px;/
}

form .ur-form-group .ur-checkbox .ur-custom-checkbox:after {
    content: '';
    position: absolute;
    background-color: transparent;
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
    width: 0.8em;
    height: 0.4em;
    margin-top: 0.14em;
    margin-left: 0.14em;
    transform: rotate(-45deg);
    transition: all 0.1s ease-in-out;
    /* border-radius: 2px; */
}

form .ur-form-group .ur-checkbox input[type="checkbox"]:checked +  .ur-custom-checkbox {
    background-color: var(--primary);
}

form .ur-form-group .ur-checkbox input[type="checkbox"]:checked +  .ur-custom-checkbox:after {
    border-color: #FFF;
}


/*-------------*/
/*--- Forms ---*/
/*-------------*/
.ur-separator {
    height: 0.1em;
    width: 100%;
    background-color: var(--lighter-gray);
    margin: 0.4em 0;
}

form .ur-form-select {
	padding: 0.2em;
    height: 2.4em;
    border: 1px solid var(--lighter-gray);
    border-radius: 4px;
    color: var(--darker-gray);
    padding: 0 0.4em;
    margin: 0.4em 0;
    outline: none;
    width: 100%;
    font-weight: 300;
}

form .ur-form-select option {
	font-weight: 300;
}

form {

}

form .ur-form-group {
    display: flex;
    flex-direction: column;
    margin: 1em 0;
}

form .ur-form-group label {
    font-weight: 300;
    font-size: 0.9em;
}


form .ur-form-group .ur-form-field {
    height: 2.4em;
    border: 1px solid var(--lighter-gray);
    border-radius: 4px;
    color: var(--darker-gray);
    padding: 0 0.4em;
    margin: 0.4em 0;
    outline: none;
    width: 100%;
}

form .ur-form-group .ur-form-help {
    font-size: 0.8em;
    margin: 0 0.6em;
    color: var(--darker-gray);
}

form .ur-form-group .ur-form-rule-group {
    margin: 0 1.4em;
    color: var(--darker-gray);
}

form .ur-form-group .ur-form-rule-group .ur-form-rule {
    font-size: 0.8em;
    margin: 0.2em 0;
}

form .ur-form-group .ur-form-invalid {
    border: 1px solid var(--danger);
}

form .ur-form-group .ur-form-invalid-text {
    font-size: 0.8em;
    margin: 0 0.6em;
    color: var(--danger);
}

form .ur-form-group .ur-form-valid {
    border: 1px solid var(--success);
}

/*----------------*/
/*--- personal ---*/
/*----------------*/
.personal {
    display: none;
}

.personal fieldset {
    padding: 1em;
}

.personal .radio {
    margin: 0;
    padding: 0;
}

.personal .or-sep {
    font-size: 0.9em;
    color: var(--dark-gray);
    font-weight: 200;
    text-align: center;
}

@media (min-width: 50px) {
    .container .main-body .btn-group,
    .container .main-body .main-btn {
        float: right;
        margin: 0;
        margin-bottom: 1em;
    }    
	.headerTitle{
		padding-left: 1em;
	}
	
	.headerImgDiv
	{
		display:none;
	}
	.nav
	{
		display:block;
	}
	.headerTitleDiv
	{
		padding-top: 1em;
		padding-bottom: 1em;
	}

	.headerBar
	{
		text-align:center;
		border:1px solid black;
		font-weight:bold;
	}
	.headerTitleBar
	{
		width: 35%;
	}
}

@media (min-width: 650px) {
    .container .main-body .btn-group,
    .container .main-body .main-btn {
        float: right;
        margin: 0;
        margin-bottom: 1em;
    }    
	.headerTitle{
		padding-left: 1em;
	}
	
	.headerImgDiv
	{
		display:none;
	}
	.nav
	{
		display:block;
	}
	
	.headerBar
	{
		text-align:center;
		border:1px solid black;
		font-weight:bold;
	}
	.headerTitleBar
	{
		width: 35%;
	}
	
	.headerTitleDiv
	{
		padding-top: 1em;
		padding-bottom: 1em;
	}
}

	
@media (min-width: 768px) {
    .container .main-body .btn-group,
    .container .main-body .main-btn {
        float: right;
        margin: 0;
        margin-bottom: 1em;
    }    
	.headerTitle{
		padding-left: 1em;
	}
	
	.headerTitleDiv
	{
		padding-top:4em;
	}
	
	.headerImgDiv
	{
		display:block;
	}
	.headerBar
	{
		text-align:center;
		border:1px solid black;
		font-weight:bold;
	}
	
	.nav
	{
		display:none;
	}
	.headerTitleBar
	{
		width: 15%;
	}
}

@media (min-width: 1024px) {
    /*-----------------*/
    /*--- container ---*/
    /*-----------------*/
	.headerTitleDiv
{
	padding-top:3em;
}

    .container {
        display: flex;
    }

.headerTitle{
		padding-left: 1em;
	}
	
	.headerImgDiv
	{
		display:block;
	}
	
	.headerBar
	{
		text-align:center;
		border:1px solid black;
		font-weight:bold;
	}
	.headerTitleBar
	{
		width: 15%;
	}

    /*--- nav ---*/
    .container .nav {
		
		display:none;
        padding: 1.2em 0;
        width: 20em;
        height: 100vh;
        position: fixed;
    }

    .container .nav .brand img {
        width: 12em;
        border-radius: 0.2em;
    }

    /*--- main body ---*/
    .container .main-body {
        padding: 1em;
        width: 100%;
        margin: 1em 15% 0 15%;
    }

    .container .main-body h1 {
        font-size: 2.4em;
    }

    .container .main-body h3 {
        font-size: 1.4em;
    }

    .container .main-body .info p {
        font-size: 1em;
        margin-bottom: 0.4em;
        font-weight: 300;
    }

    .container .main-body .info li {
        font-size: 1em;
    }
}