@font-face {
	font-family: 'Times New Roman';
	src: url('../fonts/times_new_roman.eot'); /* IE 9 Compatibility Mode */
	src: url('../fonts/times_new_roman.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../fonts/times_new_roman.woff2') format('woff2'), /* Super Modern Browsers */
		url('../fonts/times_new_roman.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../fonts/times_new_roman.ttf') format('truetype'), /* Safari, Android, iOS */
		url('../fonts/times_new_roman.svg#times_new_roman') format('svg'); /* Chrome < 4, Legacy iOS */
}

body {
	font-family: Times New Roman;
	height:100%;
	font-size: 16pt;
	/*background: linear-gradient(135deg,hsl(224deg 97% 71%) 0,hsla(236.6,0%,53.52%,0) 70%),linear-gradient(25deg,hsl(58deg 100% 50%) 10%,hsla(220.75,34.93%,26.52%,0) 80%),linear-gradient(315deg,hsl(227deg 100% 60%) 15%,hsla(46.42,36.62%,83.92%,0) 80%),linear-gradient(245deg,hsl(230deg 100% 32%) 100%,hsla(191.32,50.68%,56.45%,0) 70%);
	background-repeat: no-repeat;
    background-attachment: fixed;*/
    height: 100%;
}

.logo-img {
    max-width: 100%;
	margin: 0 auto 0px auto;
	display: block;
}

.info_little {}  /*информация, норм шрифт */
.info_mid  {color:black; font-size:130%; }   /*информация увеличенный шрифт*/
.info_midt  {/*информация увеличенный шрифт*/
	width: 100%; 
	display: inline-block;
	text-align: center;
	color: #9f5050;
	font-weight: bold;
	font-size: 18pt;
	
}   
.info_centered  {color:black; font-size:130%;  text-align:center;}    /*информация центрированная */
.info_error  {color:red; font-size:150%; text-align:center;}           /*информация об ошибках*/

.caption {font-size:130%; font-weight:bold; text-align:center;}             /*заголовок, напр название вуза */
.big_caption  {font-size:200%; font-weight:bold; text-align:center;}    /*большой заголовок, напр название теста*/
/*
.test_titul_mes
.test_descript_mes
.test_result
.test_result_table*/

/*testing*/
/*
.caption_Q


.u*/

.login {
	margin: 0 auto;
}

.caption_studname {
	text-align: center;
	color: #9f5050; 
	font-weight: bold;
	font-size: 17pt;
}

.caption_action {
	text-align: left;
	color: #9f5050;
	font-size: 15pt;
}

/*Стилі питання*/
	.q{
		width: 99%;
		padding: 5px;
		margin-top: 15px;
		color: #0D1216;
		font-size: 18pt;
		border: 1px solid black;
		border-radius: 3px;
		background-color: #fbffe5;
	}
/*------------------------------------------------------*/
/*Стилі тпблиці відповідей*/
	#utable{
		width: 100%;
		padding: 0px;
		margin: 0;
		color: #0D1216;
		font-size: 16pt;
		border: 0px;
		border-spacing: 1px 10px;
	}
	#utable td { 
		padding: 3px; 
		border: 1px solid black; 
		text-align: left;
		border-radius: 3px;
	}
	#utable tr:nth-of-type(odd) { 
		background: #f2f7ff; 
	}
	#utable tr:nth-of-type(even) { 
		background: #f2f7ff; 
	}
	#utable tr:hover { 
		background-color: #CCFFCC;
	}

/*------------------------------------------------------*/

/*Стилі таблиці тестів студента*/
	#tab-tests {
		width: 100%; 
		border-collapse: collapse;
		padding: 0;
		margin: 0;
		font-size: 14pt;
		border: 2px solid black;
	}
	#tab-tests a { 
		font-weight: bold;
	}
	#tab-tests thead {
		border: 2px solid black;
	}
	#tab-tests tr:nth-of-type(odd) { 
		background: #d9edf7; 
	}
	#tab-tests tr:nth-of-type(even) { 
		background: #fcf8e3; 
	}
	#tab-tests tr:hover { 
		background-color: #CCFFCC;
	}	
	#tab-tests th { 
		background: #f3ecff; 
		font-weight: bold;
		text-align: center;
		border: 1px solid black;
	}
	#tab-tests td { 
		padding: 3px; 
		border: 1px solid black; 
		text-align: left; 
	}
/*------------------------------------------------------*/	
	/*Стилі таблиці тестів викладачів*/
	#tab-tests-t {
		width: 100%; 
		border-collapse: collapse;
		padding: 0;
		margin: 0;
		font-size: 14pt;
		border: 2px solid black;
	}
	#tab-tests-t a { 
		font-weight: bold;
	}
	#tab-tests-t thead {
		border: 2px solid black;
	}
	#tab-tests-t tr:nth-of-type(odd) { 
		background: #d9edf7; 
	}
	#tab-tests-t tr:nth-of-type(even) { 
		background: #fcf8e3; 
	}
	#tab-tests-t tr:hover { 
		background-color: #CCFFCC;
	}	
	#tab-tests-t th { 
		background: #f3ecff; 
		font-weight: bold;
		text-align: center;
		border: 1px solid black;
	}
	#tab-tests-t td { 
		padding: 3px; 
		border: 1px solid black; 
		text-align: left; 
	}
/*------------------------------------------------------*/
.test-tame{
	
}

.test-demonstration{
	
}

.test-answer{
	
}
/*Адаптація для мобільних пристроїв*/

	@media only screen 
	and (max-width: 750px),	(min-device-width: 750px) 
	and (max-device-width: 750px)  {
	
	.login tr td{
		display: block;
	}
		
		/*Адаптація таблиці тестів НЕТ*/
		/*Стилі таблиці тестів студента*/
	#tab-tests table, #tab-tests tbody, #tab-tests thead, #tab-tests th, #tab-tests td, #tab-tests tr {
		display: block;
	}
	#tab-tests thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#tab-tests thead {
		border: 0px;
	}
	#tab-tests tr {
		border: 1px solid #333;
	}	
	#tab-tests td {
		border: none;
		border-bottom: 1px solid #333;
		position: relative;
		padding-left: 50%;
	}	
	#tab-tests td:before {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	#tab-tests-t td:after {
		content: '\A0';
	}
	#tab-tests td:nth-of-type(1):before { content: "Тести"; font-weight:bold; }
	#tab-tests td:nth-of-type(2):before { content: "Навчальний режим"; font-weight:bold; }
	#tab-tests td:nth-of-type(3):before { content: "Опис тесту"; font-weight:bold; }
	#tab-tests td:nth-of-type(4):before { content: "Питань"; font-weight:bold; }
	#tab-tests td:nth-of-type(5):before { content: "Спроб зроблено:"; font-weight:bold; }
	#tab-tests td:nth-of-type(6):before { content: "Спроб залишилось:"; font-weight:bold; }
	#tab-tests td:nth-of-type(7):before { content: "Тест з предмету:"; font-weight:bold; }	
	/*------------------------------------------------------*/	
	
			/*Стилі таблиці тестів викладача*/
	#tab-tests-t table, #tab-tests-t tbody, #tab-tests-t thead, #tab-tests-t th, #tab-tests-t td, #tab-tests-t tr {
		display: block;
	}
	#tab-tests-t thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	#tab-tests-t tr {
		border: 1px solid #333;
	}
	#tab-tests-t thead {
		border: 0px;
	}	
	#tab-tests-t td {
		border: none;
		border-bottom: 1px solid #333;
		position: relative;
		padding-left: 50%;
	}	
	#tab-tests-t td:before {
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%;
		padding-right: 10px;
		white-space: nowrap;
	}
	#tab-tests-t td:after {
		content: '\A0';
	}
	#tab-tests-t td:nth-of-type(1):before { content: "Тести"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(2):before { content: "Предмет"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(3):before { content: "Розділ"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(4):before { content: "Автор"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(5):before { content: "Створено"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(6):before { content: "Питань"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(7):before { content: "Варіантів"; font-weight:bold; }
	#tab-tests-t td:nth-of-type(8):before { content: "Доступ до тесту"; font-weight:bold; }	
	/*------------------------------------------------------*/	
	
	}		
	


	/* iPads (portrait and landscape) ----------- */
	@media only screen
	and (min-device-width : 220px)
	and (max-device-width : 350px) {
					
	.login tr td{
		display: block;
		text-align: center;	
		margin-bottom: 20px;
	}
}
/*------------------------------------------------------*/
				
#tuser_name, #tuser_pwd, #user_name, #user_pwd {
    display: block;
    width: 95%;
    height: 28px;
    padding: 5px 5px;
    font-size: 18px;
	font-family:Times New Roman;
    line-height: 1.42857143;
    color: #333;
    background-color: #fff;
    background-image: none;
    border: 1px solid #555;
    border-radius: 4px;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

input{
	font-family:Times New Roman;
    font-size: 16pt;
	padding: 5px;
}
 /*Временно
input{
    padding: 5px;
    font-size: 14pt;
	font-family:Times New Roman;
    line-height: 1.42857143;
    border: 1px solid #555;
    border-radius: 4px;
}
input:hover { 
		background-color: #c9dcff;
}*/

.btn {
    /*display: inline-block;*/
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.btn:focus,.btn:hover {
    text-decoration: none
}

.btn.focus,.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25)
}

.btn.disabled,.btn:disabled {
    opacity: .65
}

.btn:not(:disabled):not(.disabled) {
    cursor: pointer
}

.btn:not(:disabled):not(.disabled).active,.btn:not(:disabled):not(.disabled):active {
    background-image: none
}

a.btn.disabled,fieldset:disabled a.btn {
    pointer-events: none
}

.btn-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.btn-primary:hover {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc
}

.btn-primary.focus,.btn-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.btn-primary.disabled,.btn-primary:disabled {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.btn-primary:not(:disabled):not(.disabled).active,.btn-primary:not(:disabled):not(.disabled):active,.show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #0062cc;
    border-color: #005cbf
}

.btn-primary:not(:disabled):not(.disabled).active:focus,.btn-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-secondary:hover {
    color: #fff;
    background-color: #5a6268;
    border-color: #545b62
}

.btn-secondary.focus,.btn-secondary:focus {
    box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
}

.btn-secondary.disabled,.btn-secondary:disabled {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-secondary:not(:disabled):not(.disabled).active,.btn-secondary:not(:disabled):not(.disabled):active,.show>.btn-secondary.dropdown-toggle {
    color: #fff;
    background-color: #545b62;
    border-color: #4e555b
}

.btn-secondary:not(:disabled):not(.disabled).active:focus,.btn-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
}

.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745
}

.btn-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34
}

.btn-success.focus,.btn-success:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.btn-success.disabled,.btn-success:disabled {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745
}

.btn-success:not(:disabled):not(.disabled).active,.btn-success:not(:disabled):not(.disabled):active,.show>.btn-success.dropdown-toggle {
    color: #fff;
    background-color: #1e7e34;
    border-color: #1c7430
}

.btn-success:not(:disabled):not(.disabled).active:focus,.btn-success:not(:disabled):not(.disabled):active:focus,.show>.btn-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.btn-info {
    color: #fff;
    background-color: #31b0d5;
    border-color: #31b0d5
}

.btn-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b
}

.btn-info.focus,.btn-info:focus {
    box-shadow: 0 0 0 .2rem rgba(23,162,184,.5)
}

.btn-info.disabled,.btn-info:disabled {
    color: #fff;
    background-color: #31b0d5;
    border-color: #31b0d5
}

.btn-info:not(:disabled):not(.disabled).active,.btn-info:not(:disabled):not(.disabled):active,.show>.btn-info.dropdown-toggle {
    color: #fff;
    background-color: #117a8b;
    border-color: #10707f
}

.btn-info:not(:disabled):not(.disabled).active:focus,.btn-info:not(:disabled):not(.disabled):active:focus,.show>.btn-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(23,162,184,.5)
}

.btn-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.btn-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00
}

.btn-warning.focus,.btn-warning:focus {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.btn-warning.disabled,.btn-warning:disabled {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.btn-warning:not(:disabled):not(.disabled).active,.btn-warning:not(:disabled):not(.disabled):active,.show>.btn-warning.dropdown-toggle {
    color: #212529;
    background-color: #d39e00;
    border-color: #c69500
}

.btn-warning:not(:disabled):not(.disabled).active:focus,.btn-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130
}

.btn-danger.focus,.btn-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}

.btn-danger.disabled,.btn-danger:disabled {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-danger:not(:disabled):not(.disabled).active,.btn-danger:not(:disabled):not(.disabled):active,.show>.btn-danger.dropdown-toggle {
    color: #fff;
    background-color: #bd2130;
    border-color: #b21f2d
}

.btn-danger:not(:disabled):not(.disabled).active:focus,.btn-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-light:hover {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5
}

.btn-light.focus,.btn-light:focus {
    box-shadow: 0 0 0 .2rem rgba(248,249,250,.5)
}

.btn-light.disabled,.btn-light:disabled {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-light:not(:disabled):not(.disabled).active,.btn-light:not(:disabled):not(.disabled):active,.show>.btn-light.dropdown-toggle {
    color: #212529;
    background-color: #dae0e5;
    border-color: #d3d9df
}

.btn-light:not(:disabled):not(.disabled).active:focus,.btn-light:not(:disabled):not(.disabled):active:focus,.show>.btn-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(248,249,250,.5)
}

.btn-dark {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40
}

.btn-dark:hover {
    color: #fff;
    background-color: #23272b;
    border-color: #1d2124
}

.btn-dark.focus,.btn-dark:focus {
    box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
}

.btn-dark.disabled,.btn-dark:disabled {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40
}

.btn-dark:not(:disabled):not(.disabled).active,.btn-dark:not(:disabled):not(.disabled):active,.show>.btn-dark.dropdown-toggle {
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d
}

.btn-dark:not(:disabled):not(.disabled).active:focus,.btn-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
}

.btn-outline-primary {
    color: #007bff;
    background-color: transparent;
    background-image: none;
    border-color: #007bff
}

.btn-outline-primary:hover {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.btn-outline-primary.focus,.btn-outline-primary:focus {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.btn-outline-primary.disabled,.btn-outline-primary:disabled {
    color: #007bff;
    background-color: transparent
}

.btn-outline-primary:not(:disabled):not(.disabled).active,.btn-outline-primary:not(:disabled):not(.disabled):active,.show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff
}

.btn-outline-primary:not(:disabled):not(.disabled).active:focus,.btn-outline-primary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-primary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.5)
}

.btn-outline-secondary {
    color: #6c757d;
    background-color: transparent;
    background-image: none;
    border-color: #6c757d
}

.btn-outline-secondary:hover {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-outline-secondary.focus,.btn-outline-secondary:focus {
    box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
}

.btn-outline-secondary.disabled,.btn-outline-secondary:disabled {
    color: #6c757d;
    background-color: transparent
}

.btn-outline-secondary:not(:disabled):not(.disabled).active,.btn-outline-secondary:not(:disabled):not(.disabled):active,.show>.btn-outline-secondary.dropdown-toggle {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d
}

.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-secondary.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(108,117,125,.5)
}

.btn-outline-success {
    color: #28a745;
    background-color: transparent;
    background-image: none;
    border-color: #28a745
}

.btn-outline-success:hover {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745
}

.btn-outline-success.focus,.btn-outline-success:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.btn-outline-success.disabled,.btn-outline-success:disabled {
    color: #28a745;
    background-color: transparent
}

.btn-outline-success:not(:disabled):not(.disabled).active,.btn-outline-success:not(:disabled):not(.disabled):active,.show>.btn-outline-success.dropdown-toggle {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745
}

.btn-outline-success:not(:disabled):not(.disabled).active:focus,.btn-outline-success:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-success.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(40,167,69,.5)
}

.btn-outline-info {
    color: #31b0d5;
    background-color: transparent;
    background-image: none;
    border-color: #31b0d5
}

.btn-outline-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #31b0d5
}

.btn-outline-info.focus,.btn-outline-info:focus {
    box-shadow: 0 0 0 .2rem rgba(23,162,184,.5)
}

.btn-outline-info.disabled,.btn-outline-info:disabled {
    color: #31b0d5;
    background-color: transparent
}

.btn-outline-info:not(:disabled):not(.disabled).active,.btn-outline-info:not(:disabled):not(.disabled):active,.show>.btn-outline-info.dropdown-toggle {
    color: #fff;
    background-color: #31b0d5;
    border-color: #31b0d5
}

.btn-outline-info:not(:disabled):not(.disabled).active:focus,.btn-outline-info:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-info.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(23,162,184,.5)
}

.btn-outline-warning {
    color: #ffc107;
    background-color: transparent;
    background-image: none;
    border-color: #ffc107
}

.btn-outline-warning:hover {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.btn-outline-warning.focus,.btn-outline-warning:focus {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.btn-outline-warning.disabled,.btn-outline-warning:disabled {
    color: #ffc107;
    background-color: transparent
}

.btn-outline-warning:not(:disabled):not(.disabled).active,.btn-outline-warning:not(:disabled):not(.disabled):active,.show>.btn-outline-warning.dropdown-toggle {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107
}

.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-warning.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(255,193,7,.5)
}

.btn-outline-danger {
    color: #dc3545;
    background-color: transparent;
    background-image: none;
    border-color: #dc3545
}

.btn-outline-danger:hover {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-outline-danger.focus,.btn-outline-danger:focus {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}

.btn-outline-danger.disabled,.btn-outline-danger:disabled {
    color: #dc3545;
    background-color: transparent
}

.btn-outline-danger:not(:disabled):not(.disabled).active,.btn-outline-danger:not(:disabled):not(.disabled):active,.show>.btn-outline-danger.dropdown-toggle {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545
}

.btn-outline-danger:not(:disabled):not(.disabled).active:focus,.btn-outline-danger:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(220,53,69,.5)
}

.btn-outline-light {
    color: #f8f9fa;
    background-color: transparent;
    background-image: none;
    border-color: #f8f9fa
}

.btn-outline-light:hover {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-outline-light.focus,.btn-outline-light:focus {
    box-shadow: 0 0 0 .2rem rgba(248,249,250,.5)
}

.btn-outline-light.disabled,.btn-outline-light:disabled {
    color: #f8f9fa;
    background-color: transparent
}

.btn-outline-light:not(:disabled):not(.disabled).active,.btn-outline-light:not(:disabled):not(.disabled):active,.show>.btn-outline-light.dropdown-toggle {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa
}

.btn-outline-light:not(:disabled):not(.disabled).active:focus,.btn-outline-light:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(248,249,250,.5)
}

.btn-outline-dark {
    color: #343a40;
    background-color: transparent;
    background-image: none;
    border-color: #343a40
}

.btn-outline-dark:hover {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40
}

.btn-outline-dark.focus,.btn-outline-dark:focus {
    box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
}

.btn-outline-dark.disabled,.btn-outline-dark:disabled {
    color: #343a40;
    background-color: transparent
}

.btn-outline-dark:not(:disabled):not(.disabled).active,.btn-outline-dark:not(:disabled):not(.disabled):active,.show>.btn-outline-dark.dropdown-toggle {
    color: #fff;
    background-color: #343a40;
    border-color: #343a40
}

.btn-outline-dark:not(:disabled):not(.disabled).active:focus,.btn-outline-dark:not(:disabled):not(.disabled):active:focus,.show>.btn-outline-dark.dropdown-toggle:focus {
    box-shadow: 0 0 0 .2rem rgba(52,58,64,.5)
}

.btn-link {
    font-weight: 400;
    color: #007bff;
    background-color: transparent
}

.btn-link:hover {
    color: #0056b3;
    text-decoration: underline;
    background-color: transparent;
    border-color: transparent
}

.btn-link.focus,.btn-link:focus {
    text-decoration: underline;
    border-color: transparent;
    box-shadow: none
}

.btn-link.disabled,.btn-link:disabled {
    color: #6c757d
}

.btn-group-lg>.btn,.btn-lg {
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: .3rem
}

.btn-group-sm>.btn,.btn-sm {
    padding: .25rem .5rem;
    /*font-size: 15px;*/
    line-height: 1.5;
    border-radius: .2rem
}

.btn-block {
    display: block;
    width: 100%
}

.btn-block+.btn-block {
    margin-top: .5rem
}

input[type=button].btn-block,input[type=reset].btn-block,input[type=submit].btn-block {
    width: 100%
}

.btn-group,.btn-group-vertical {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    vertical-align: middle
}

.btn-group-vertical>.btn,.btn-group>.btn {
    position: relative;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto
}

.btn-group-vertical>.btn:hover,.btn-group>.btn:hover {
    z-index: 1
}

.btn-group-vertical>.btn.active,.btn-group-vertical>.btn:active,.btn-group-vertical>.btn:focus,.btn-group>.btn.active,.btn-group>.btn:active,.btn-group>.btn:focus {
    z-index: 1
}

.btn-group .btn+.btn,.btn-group .btn+.btn-group,.btn-group .btn-group+.btn,.btn-group .btn-group+.btn-group,.btn-group-vertical .btn+.btn,.btn-group-vertical .btn+.btn-group,.btn-group-vertical .btn-group+.btn,.btn-group-vertical .btn-group+.btn-group {
    margin-left: -1px
}

.btn-toolbar {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.btn-toolbar .input-group {
    width: auto
}

.btn-group>.btn:first-child {
    margin-left: 0
}

.btn-group>.btn-group:not(:last-child)>.btn,.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group>.btn-group:not(:first-child)>.btn,.btn-group>.btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0
}

.dropdown-toggle-split {
    padding-right: .5625rem;
    padding-left: .5625rem
}

.dropdown-toggle-split::after {
    margin-left: 0
}

.btn-group-sm>.btn+.dropdown-toggle-split,.btn-sm+.dropdown-toggle-split {
    padding-right: .375rem;
    padding-left: .375rem
}

.btn-group-lg>.btn+.dropdown-toggle-split,.btn-lg+.dropdown-toggle-split {
    padding-right: .75rem;
    padding-left: .75rem
}

.btn-group-vertical {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.btn-group-vertical .btn,.btn-group-vertical .btn-group {
    width: 100%
}

.btn-group-vertical>.btn+.btn,.btn-group-vertical>.btn+.btn-group,.btn-group-vertical>.btn-group+.btn,.btn-group-vertical>.btn-group+.btn-group {
    margin-top: -1px;
    margin-left: 0
}

.btn-group-vertical>.btn-group:not(:last-child)>.btn,.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0
}

.btn-group-vertical>.btn-group:not(:first-child)>.btn,.btn-group-vertical>.btn:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.btn-group-toggle>.btn,.btn-group-toggle>.btn-group>.btn {
    margin-bottom: 0
}

.btn-group-toggle>.btn input[type=checkbox],.btn-group-toggle>.btn input[type=radio],.btn-group-toggle>.btn-group>.btn input[type=checkbox],.btn-group-toggle>.btn-group>.btn input[type=radio] {
    position: absolute;
    clip: rect(0,0,0,0);
    pointer-events: none
}

	@media only screen
	and (min-width : 480px)
	and (max-width : 880px){
	.q{
		width: 98%;
	}
}
	@media only screen
	and (min-width : 380px)
	and (max-width : 480px){
    .btn-sm {
		font-size: 13px;
	}
	body {
		font-size: 16pt;
	}
	input{
		font-size: 15pt;
	}
	.q{
		width: 97%;
	}
}
	
	@media only screen
	and (min-width : 220px)
	and (max-width : 380px){
    .btn-sm {
		font-size: 13px;
	}
	body {
		font-size: 15pt;
	}
	input{
		font-size: 13pt;
	}
	.q{
		width: 96%;
	}
}