/* =============================================================================

	STYLE.CSS
	version: 2.0
	updated: 2011-09-01, 12:44 GMT+1

============================================================================= */

/* =============================================================================
HTML - styles
============================================================================= */

body {background-color:#eaeaea; color:#303030;}
body{
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
a {color:#0085cc;}
a:hover, a:active, a:focus {color:#df0000;}
#content h2 {color:#0085cc;}
#content table {border:2px solid #cfcfcf;}
#content table th {border-right:1px solid #0074B3; background-color:#0085cc; color:#fff;}
#content table td {border:1px solid #cfcfcf;}
#content table tr.bg td {background-color:#e8f6ff;}
#content dl dt {color:#df0000;}
#content fieldset {border:1px solid #ccc;}
#content legend {background:#FFF; color:#0085cc;}
#content acronym, #content abbr, #content .help {border-bottom:1px dotted #cfcfcf;}

/* =============================================================================
HTML - without styles
============================================================================= */

table.nostyle th, dl.nostyle dt {color:#303030 !important;}

/* =============================================================================
LAYOUT
============================================================================= */

#tray {background-color:#303030; color:#cfcfcf;}
#tray a, #tray strong {color:#fff;}
#tray a:hover, #tray a:active, #tray a:focus {color:#b4e3ff;}
#menu {background-color:#0085cc;}
#menu ul li a {background-color:#fff; color:#303030;}
#menu ul li a span {background-color:#FFF;}
#menu ul li a:hover, #menu ul li a:active, #menu ul li a:focus, #menu ul li#menu-active a {background-color:#FFF; color:#df0000;}
#menu ul li a:hover span, #menu ul li#menu-active a span {background-color:#FFF;}
#menu ul li#menu-active a {color:#0085cc;}
#menu ul.f-right a {color:#df0000;}
#content {border:1px solid #afafaf; background:#fff;}
#footer {color:#707070;}
#footer a {color:#707070;}
#footer a:hover, #footer a:active, #footer a:focus {color:#303030;}

/* =============================================================================
OTHERS
============================================================================= */

#aside #logo img {border:1px solid #bfbfbf;}
#aside #search fieldset a {color:#303030;}
#aside #search fieldset {border:1px solid #bfbfbf;}
#aside #search fieldset a:hover, #aside #search fieldset a:active, #aside #search fieldset a:focus {color:#df0000;}
#aside #btn-create a {background-color:#fff; color:#303030;}
#aside #btn-create a span {background-color:#fff;}
#aside ul li a {border-bottom:1px solid #cfcfcf; color:#303030;}
#aside ul li#submenu-active a {background-color:#0085cc; color:#fff;}
#aside ul li a:hover, #aside ul li a:active, #aside ul li a:focus {color:#df0000;}
#aside ul ul li a, #aside ul li#submenu-active ul li a {border-bottom:1px solid #cfcfcf; background-color:#f5f5f5; color:#303030;}
#aside ul li ul li a {background-color:#e3e3e3;}
#aside ul ul li a:hover, #aside ul ul li a:active, #aside ul ul li a:focus, #aside ul li#submenu-active ul li a:hover, #aside ul li#submenu-active ul li a:active, #aside ul li#submenu-active ul li a:focus {color:#df0000;}
#content h1 {background-color:#303030; color:#fff;}
#content .tabs {border-bottom:1px solid #cfcfcf;}
#content .tabs a {color:#303030;}
#content .tabs a span {color:#303030;}
#content .tabs .ui-tabs-selected a {color:#fff;}
#content .tabs .ui-tabs-selected a span {color:#fff;}
.high {color:#df0000;}
.high-bg {background:#FFB;}
.low {color:#707070;}

/* =============================================================================
MESSAGES
============================================================================= */

.msg.warning {border:2px solid #F2DD8C; background-color:#FFF5CC;}
.msg.warning a {color:#df0000;} .msg.warning a:hover, .msg.warning a:active, .msg.warning a:focus {color:#303030;}
.msg.info {border:2px solid #B8E2FB; background-color:#E8F6FF;}
.msg.done {border:2px solid #BBDF8D; background-color:#EAF7D9;}
.msg.error {border:2px solid #FFAEAE; background-color:#FEEBEB;}

:-moz-placeholder {
  color: #c9c9c9 !important;
  font-size: 13px;
}

::-webkit-input-placeholder {
  color: #ccc;
  font-size: 13px;
}



.modalBounce:hover {
  animation: bounceModal 1s;
}

.modalConta-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  z-index: 9997;
  overflow: hidden;
  display: none;
}

.modalConta-load {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9998;
  display: none;
}

.modalConta {
  position: fixed;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 60%;
  background: #fff;
  box-shadow: 0 0.3em 4em rgba(35,182,152,0.7);
  transform: translateX(200%);
  transition: 0.3s linear;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 9999;
}

.modalConta::-webkit-scrollbar {
  width: 2%;
  background: rgba(0,0,0,0.6);
  border-radius: 10px;
}

.modalConta::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(35,182,152,0.5);
  background: rgba(0,0,0,0.5);
}

.modalConta::-webkit-scrollbar-thumb {
  background: #1475b2;
  border-radius: 10px;
}

.modalConta .close-modalConta {
  width: 40px;
  height: 40px;
  background: #1475b2;
  color: #fff;
  padding-top: 10px;
  text-align: center;
  cursor: pointer;
  box-sizing: border-box;
  transition: 0.2s linear;
  margin-left: 15px;
}

.modalConta .close-modalConta span {
  width: 25px;
  height: 4px;
  margin-left: -7px;
  margin-bottom: 2px;
  display: block;
  background: #fff;
  transition: 0.2s linear;
  border-radius: 5px;
}

.modalConta .modalConta-content form {
  padding: 20px;
  padding-left: 5px;
  margin-left: -80px;
  box-sizing: border-box;
}

.modalConta .close-modalConta:hover span:nth-child(2) {
  display: none;
}

.modalConta .close-modalConta:hover span:nth-child(1) {
  transform: rotate(45deg) translate(20%, 100%);
}

.modalConta .close-modalConta:hover span:nth-child(3) {
  transform: rotate(-45deg);
}

.modalConta .modalConta-content .user {
  text-align: right;
  font-size: 17px;
}

.resumo {
  position: relative;
}

.modalResumo {
  position: absolute;
  bottom: -100%;
  left: 0;
  transform: translate(0, 60%);
  width: 100%;
  min-height: 50px;
  height: auto;
  float: left;
  background: #F3F3F4;
  border-radius: 5px;
  border: 1px solid #F3F3F4;
  box-shadow: 0 0.2em 0.3em rgba(0,0,0,0.7);
  display: none;
  box-sizing: border-box;
  padding: 10px;
  font-weight: bold;
  z-index: 9000;
}

.modalResumo p:nth-child(2) {
  color: #1D84C6;
}

.modalResumo::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -55%) rotate(45deg);
  width: 20px;
  height: 20px;
  background: #F3F3F4;
}


.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.btn-warning {
    display: inline-block;
    padding: 3px 12px; /* Mesma configuração de padding do .btn */
    margin-bottom: 0;
    font-size: 12px; /* Tamanho de fonte igual ao do .btn */
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #ff9800; /* Cor de fundo laranja */
    color: #fff; /* Cor do texto branca */
    border: 1px solid #ff9800; /* Borda laranja */
    border-radius: 4px; /* Borda arredondada igual ao .btn */
    text-decoration: none; /* Remove sublinhado */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Efeito hover */
.btn-warning:hover {
    background-color: #e68900; /* Laranja um pouco mais escuro no hover */
    border-color: #cc7a00; /* Borda um pouco mais escura no hover */
}

/* Efeito ativo ao pressionar o botão */
.btn-warning:active {
    background-color: #cc7a00; /* Fundo mais escuro quando o botão é pressionado */
    border-color: #b36b00; /* Borda mais escura ao pressionar */
}

/* Botão desabilitado */
.btn-warning:disabled {
    opacity: 0.65; /* Transparência para indicar desabilitado */
    cursor: not-allowed; /* Cursor indicando que não é clicável */
}



.btn {
    border-radius: 3px;
}


.btn-success {
    display: inline-block;
    padding: 3px 12px; /* Mesma configuração de padding do .btn */
    margin-bottom: 0;
    font-size: 12px; /* Tamanho de fonte igual ao do .btn */
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #1475b2; /* Cor de fundo especificada */
    color: #fff; /* Cor do texto branca */
    border: 1px solid #1475b2; /* Borda da mesma cor do fundo */
    border-radius: 4px; /* Borda arredondada igual ao .btn */
    text-decoration: none; /* Remove sublinhado */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Efeito hover */
.btn-success:hover {
    background-color: #126aa3; /* Azul um pouco mais escuro no hover */
    border-color: #115c91; /* Borda um pouco mais escura no hover */
}

/* Efeito ativo ao pressionar o botão */
.btn-success:active {
    background-color: #115c91; /* Fundo mais escuro quando o botão é pressionado */
    border-color: #0e507f; /* Borda mais escura ao pressionar */
}

/* Botão desabilitado */
.btn-success:disabled {
    opacity: 0.65; /* Transparência para indicar desabilitado */
    cursor: not-allowed; /* Cursor indicando que não é clicável */
}



.btn {
    display: inline-block;
    padding: 3px 12px;
    margin-bottom: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}


.btn-primary {
    display: inline-block;
    padding: 3px 12px; /* Mesma configuração de padding do .btn */
    margin-bottom: 0;
    font-size: 12px; /* Tamanho de fonte igual ao do .btn */
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #28a745; /* Cor de fundo verde */
    color: #fff; /* Cor do texto branca */
    border: 1px solid #28a745; /* Borda verde */
    border-radius: 4px; /* Borda arredondada igual ao .btn */
    text-decoration: none; /* Remove sublinhado */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Efeito hover */
.btn-primary:hover {
    background-color: #218838; /* Verde um pouco mais escuro no hover */
    border-color: #1e7e34; /* Borda um pouco mais escura no hover */
}

/* Efeito ativo ao pressionar o botão */
.btn-primary:active {
    background-color: #1e7e34; /* Fundo mais escuro quando o botão é pressionado */
    border-color: #1c7430; /* Borda mais escura ao pressionar */
}

/* Botão desabilitado */
.btn-primary:disabled {
    opacity: 0.65; /* Transparência para indicar desabilitado */
    cursor: not-allowed; /* Cursor indicando que não é clicável */
}


.btn-danger {
    display: inline-block;
    padding: 3px 12px; /* Mesma configuração de padding do .btn */
    margin-bottom: 0;
    font-size: 12px; /* Tamanho de fonte igual ao do .btn */
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: #dc3545; /* Cor de fundo vermelho */
    color: #fff; /* Cor do texto branco */
    border: 1px solid #dc3545; /* Borda vermelha */
    border-radius: 4px; /* Borda arredondada igual ao .btn */
    text-decoration: none; /* Remove sublinhado */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* Efeito hover */
.btn-danger:hover {
    background-color: #c82333; /* Vermelho um pouco mais escuro no hover */
    border-color: #bd2130; /* Borda um pouco mais escura no hover */
}

/* Efeito ativo ao pressionar o botão */
.btn-danger:active {
    background-color: #bd2130; /* Fundo mais escuro quando o botão é pressionado */
    border-color: #b21f2d; /* Borda mais escura ao pressionar */
}

/* Botão desabilitado */
.btn-danger:disabled {
    opacity: 0.65; /* Transparência para indicar desabilitado */
    cursor: not-allowed; /* Cursor indicando que não é clicável */
}








.div-select {
    width:350px;  /* Tamanho final do select */
    overflow:hidden; /* Esconde o conteúdo que passar do tamanho especificado */
     background-position: 205px center !important;  /*Posição da imagem do background*/
     height:28px !important; /* altura do select, importante para que tenha a mesma altura em todo os navegadores */
     font-family:Arial, sans-serif !important; /* Fonte do Select */
     font-size:18px; /* Tamanho da Fonte */
     color:#000 !important; /* Cor da Fonte */
     text-indent: 0.01px !important; /* Remove seta padrão do FireFox */
     text-overflow: "" !important;  /* Remove seta padrão do FireFox */     
     select::-ms-expand {display: none !important;} /* Remove seta padrão do IE*/
}
  
  
.label2 {
  color: white;
  padding: 0px;
}

.success {background-color: #4CAF50;} /* Green */
.info {background-color: #2196F3;} /* Blue */
.warning {background-color: #ff9800;} /* Orange */
.danger {background-color: #f44336;} /* Red */
.other {background-color: #e7e7e7; color: black;} /* Gray */



.label {
  background-color: #d1dade;
  color: #5e5e5e;
  font-family:Arial, sans-serif !important; /* Fonte do Select */
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  text-shadow: none;
}
.badge {
  background-color: #d1dade;
  color: #5e5e5e;
  font-family: 'Open Sans';
  font-size: 11px;
  font-weight: 600;
  padding-bottom: 4px;
  padding-left: 6px;
  padding-right: 6px;
  text-shadow: none;
}
.label-primary,
.badge-primary {
  background-color: #1ab394;
  color: #FFFFFF;
}
.label-success,
.badge-success {
  background-color: #1c84c6;
  color: #FFFFFF;
}
.label-warning,
.badge-warning {
  background-color: #f8ac59;
  color: #FFFFFF;
}
.label-warning-light,
.badge-warning-light {
  background-color: #f8ac59;
  color: #ffffff;
}
.label-danger,
.badge-danger {
  background-color: #ed5565;
  color: #FFFFFF;
}
.label-info,
.badge-info {
  background-color: #23c6c8;
  color: #FFFFFF;
}
.label-inverse,
.badge-inverse {
  background-color: #262626;
  color: #FFFFFF;
}
.label-white,
.badge-white {
  background-color: #FFFFFF;
  color: #5E5E5E;
}
.label-white,
.badge-disable {
  background-color: #2A2E36;
  color: #8B91A0;
}

/* =============================================================================
TEMA GLOBAL MODERNO
============================================================================= */

body {
  background:#e9eef4;
  color:#243447;
}

#cols {
  background:none !important;
}

#content {
  border:1px solid #aebdcd;
  border-radius:12px;
  background:#f1f4f8;
  box-shadow:0 6px 20px rgba(30,55,90,.12);
}

#content .tit {
  margin:0 0 15px;
  padding:14px 16px;
  border:1px solid #b6c4d3;
  border-radius:10px;
  background:#e7edf4;
  color:#172b4d;
  box-shadow:0 2px 6px rgba(30,55,90,.06);
  letter-spacing:-.2px;
}

#content fieldset {
  margin:14px 0;
  padding:18px;
  border:1px solid #aebdcd;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 10px rgba(30,55,90,.07);
}

#content legend {
  padding:0 9px;
  background:#fff;
  color:#087fb9;
  font-weight:700;
}

#content input:not([type]),
#content input[type="text"],
#content input[type="password"],
#content input[type="email"],
#content input[type="number"],
#content input[type="tel"],
#content input[type="date"],
#content input[type="time"],
#content input[type="search"],
#content select,
#content textarea {
  max-width:100%;
  min-height:36px;
  padding:7px 10px;
  border:1px solid #91a4b8;
  border-radius:7px;
  background:#fff;
  color:#243447;
  font-family:inherit;
  font-size:13px;
  line-height:1.4;
  box-shadow:inset 0 1px 2px rgba(30,55,90,.06), 0 1px 2px rgba(30,55,90,.04);
  box-sizing:border-box;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

#content textarea {
  min-height:90px;
  resize:vertical;
}

#content input:not([type]):hover,
#content input[type="text"]:hover,
#content input[type="password"]:hover,
#content input[type="email"]:hover,
#content input[type="number"]:hover,
#content input[type="tel"]:hover,
#content input[type="date"]:hover,
#content input[type="time"]:hover,
#content input[type="search"]:hover,
#content select:hover,
#content textarea:hover {
  border-color:#70869d;
}

#content input:focus,
#content select:focus,
#content textarea:focus {
  border-color:#087fb9;
  outline:none;
  box-shadow:0 0 0 3px rgba(8,127,185,.2);
}

#content input[disabled],
#content input[readonly],
#content select[disabled],
#content textarea[disabled] {
  background:#f1f5f9;
  color:#718096;
  cursor:not-allowed;
}

#content input[type="checkbox"],
#content input[type="radio"] {
  accent-color:#087fb9;
}

#content input[type="submit"],
#content input[type="button"],
#content input[type="reset"],
#content button:not(.fr-bttn):not(.fr-trigger),
#content .button1,
#content .button2,
#content .button3,
#content .btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:8px 16px;
  border:1px solid transparent;
  border-radius:7px;
  background:#087fb9;
  color:#fff;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  text-shadow:none;
  box-shadow:0 2px 6px rgba(8,127,185,.18);
  cursor:pointer;
  box-sizing:border-box;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content input[type="reset"]:hover,
#content button:not(.fr-bttn):not(.fr-trigger):hover,
#content .button1:hover,
#content .btn-primary:hover {
  border-color:#066b9c;
  background:#066b9c;
  color:#fff;
  box-shadow:0 4px 10px rgba(8,127,185,.22);
  transform:translateY(-1px);
}

#content .button2,
#content .button3,
#content .btn-default {
  border-color:#cbd5e1 !important;
  background:#fff !important;
  color:#526175 !important;
  box-shadow:0 1px 3px rgba(30,55,90,.06);
}

#content .btn-success {background:#16865b !important; border-color:#16865b !important; color:#fff !important;}
#content .btn-warning {background:#e88719 !important; border-color:#e88719 !important; color:#fff !important;}
#content .btn-danger {background:#d9485f !important; border-color:#d9485f !important; color:#fff !important;}
#content .btn-success:hover {background:#11734d !important; border-color:#11734d !important;}
#content .btn-warning:hover {background:#cf7412 !important; border-color:#cf7412 !important;}
#content .btn-danger:hover {background:#be354c !important; border-color:#be354c !important;}
#content .button2:hover,
#content .button3:hover,
#content .btn-default:hover {background:#f3f6f9 !important; border-color:#aebccc !important; color:#243447 !important;}

#content table:not(.nostyle) {
  border:1px solid #aebdcd;
  border-radius:9px;
  border-collapse:separate;
  border-spacing:0;
  background:#fff;
  overflow:hidden;
}

#content table:not(.nostyle) th {
  padding:9px 8px;
  border-color:#0874aa;
  background:#087fb9;
  color:#fff;
}

#content table:not(.nostyle) td {
  padding:8px;
  border-color:#cbd6e2;
}

#content table:not(.nostyle) tr:nth-child(even) td {
  background:#f0f4f8;
}

#content table:not(.nostyle) tr:hover td {
  background:#eef7fc;
}

#menu {
  border:0;
  background:#0792d2 !important;
  box-shadow:0 2px 8px rgba(8,86,130,.15);
}

#menu ul li a,
#menu ul li a span {
  border:0;
  background-image:none !important;
}

#menu ul li a {
  padding-left:0;
  border-radius:7px;
  background:#fff;
  box-shadow:0 2px 5px rgba(24,50,75,.16);
  transition:color .18s ease, box-shadow .18s ease, transform .18s ease;
}

#menu ul li a span {
  padding:8px 14px;
}

#menu ul li a:hover,
#menu ul li#menu-active a {
  color:#087fb9;
  box-shadow:0 4px 9px rgba(24,50,75,.2);
  transform:translateY(-1px);
}

#aside #logo img {
  border:1px solid #dce3ec;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 10px rgba(30,55,90,.06);
}

#aside ul li a,
#aside ul ul li a,
#aside ul li#submenu-active ul li a {
  border-color:#dce3ec;
  background-color:transparent;
  color:#42526a;
  transition:background-color .18s ease, color .18s ease;
}

#aside ul li a:hover,
#aside ul ul li a:hover,
#aside ul li#submenu-active ul li a:hover {
  background-color:#eef7fc;
  color:#087fb9;
}

#aside ul li#submenu-active a {
  border-radius:0 8px 8px 0;
  background-color:#087fb9;
  background-image:none !important;
  color:#fff;
}

#aside #btn-create a,
#aside #btn-create a span {
  background-image:none !important;
}

#aside #btn-create a {
  height:auto;
  padding:0;
  border:1px solid #d5dee9;
  border-radius:9px;
  background:#fff;
  box-shadow:0 2px 7px rgba(30,55,90,.08);
}

#aside #btn-create a span {
  width:173px;
  padding:10px 12px;
}

#tray input[type="text"] {
  height:28px;
  padding:5px 8px;
  border:1px solid #4b5563;
  border-radius:5px;
  background:#fff;
  box-sizing:border-box;
}

@media (max-width:700px) {
  #content {padding:12px; border-radius:8px;}
  #content fieldset {padding:14px;}
  #content input:not([type]),
  #content input[type="text"],
  #content input[type="password"],
  #content input[type="email"],
  #content input[type="tel"],
  #content select,
  #content textarea {max-width:100%;}
}