.page {width:95%;min-height: 70vh;padding: 100px 0px;padding-bottom: 60px;}
.content {margin-top: 40px;color: var(--color-text);}
.content h1 {font-size: 35px;margin: 10px 0;}
.content h2 {font-size: 28px;margin: 8px 0;color: var(--roy);}
.content h3 {font-size: 22px;margin: 5px 0;color: var(--roy2);}
.content p {padding: 8px;line-height: 31px;}
.content a {text-decoration: underline;}



form , .alert{width: 100%;max-width:850px ;}


form input:focus , form textarea:focus {border:  1px solid var(--roy); box-shadow:  0 0 0 4px var(--roy-opt);}

.form_wrap {position:relative;margin: 20px 0;width:48% ; display: inline-block;}
input[type="text"] , input[type="email"] , input[type="number"] ,input[type="password"]
, input[type="color"]  , select { 
    border: 1px solid silver;border-radius: 5px;
width:100%;font-size: 14px;box-shadow: none;padding-left: 8px;padding: 15px 20px;}

textarea  { border: 1px solid silver;border-radius: 5px;
    width:100%;font-size: 14px;box-shadow: none;padding: 8px;height: 120px;resize: vertical;}
input:focus + label, input:valid + label , 
textarea:focus + label, textarea:valid + label{font-size: 12px;color: #777d85;top: -5px;left:10px;background: #ffffff;
padding: 0px 5px 0px 5px;}
.input_wrap {width:auto; height:auto; position:relative;}
.input_wrap label {font-size:16px;color: #777d85;padding: 14px;position: absolute;top: 0;left: 0;transition:0.2s ease all; 
    -moz-transition:0.2s ease all; -webkit-transition:0.2s ease all;pointer-events: none;}


.sub {padding: 14px 10px;background-color: var(--roy);color: white;border-radius: 5px;margin: 10px 0;
border: 0;width: 100%;
}
.sub2 {padding: 14px 10px;background-color: var(--roy);color: white;border-radius: 5px;margin: 10px 0;
 border: 0;min-width: 130px;margin: 5px;
}
.sub:focus , .sub:hover , .sub2:focus , .sub2:hover {background-color: var(--roy-hover);}

.form-switch {text-align: left;margin: 25px 0;
    padding: 10px;margin: 20px 0;margin-left: 50px;
    }
.form-switch input {background-color: var(--roy-opt) !important;width: 140px;height: 20px;}
.form-switch input:checked {background-color: var(--roy) !important;}
.form-switch label {font-size: 16px !important;color: var(--color-text) !important;}
    
    
@media only screen and (max-width: 550px ) {
form .d-flex {display: block  !important;}
form .form_wrap {width: 100% !important;} 
}