/* Базовые стили */
html {box-sizing: border-box; text-size-adjust: none; -webkit-tap-highlight-color: transparent;}
*,
*::before,
*::after {box-sizing: inherit;}
body {display:flex; background:#ddd; color: #000; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 400; line-height: calc(24 / 20); min-height: 100vh; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.body {flex-direction: column; justify-content: center; align-items: center; background: url("/img/pages/home/bg-server.png") 50% 0 no-repeat;}

/* Страница авторизации */
.wrap {display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; border: 1px solid transparent; border-radius: 20px; box-shadow: 37px 127px 53px rgba(0, 0, 0, 0.01), 21px 71px 45px rgba(0, 0, 0, 0.05), 9px 32px 33px rgba(0, 0, 0, 0.09), 2px 8px 18px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); padding: 40px 34px 50px;}
.wrap .logo {margin: 0 0 37px;}

.wrap .nav.nav-pills {border: 1px solid #FFC0BD; border-radius: 10px; padding: 7px;}
.wrap .nav-pills .nav-link {color: #9E9E9E; padding: 14px 48px;}
.wrap .nav-pills .nav-link.active {color: #000; background-color: #F0F0F0; border-radius: 10px;}
.wrap .tab-content {border: 1px solid #FFC0BD; padding: 10px; border-radius: 10px;}

.wrap .form-control {border: none; font-size: 20px;}
.wrap .form-enter {display: flex; flex-direction: column; gap: 30px;}
.wrap .form-btns {display: flex; flex-direction: column; gap: 18px;}
.wrap .form-btns .btn.btn-danger {color: #fff;background-color: #F04B42;border-color: #F04B42; font-size: 20px;border-radius: 10px;padding: 10px;}
.wrap .form-btns .btn.btn-second {background-color: #FFC0BD; border-color: #FFC0BD; color: #6B3232;}

/* Header */
header {max-width:70px; flex:270px; /*background:#f04b42;*/ /*position:sticky;*/ position: fixed; height:100vh; z-index:10;}



header .left-bar {height:100%; display:flex; flex-direction:column; align-items: flex-start; padding-top: 0; padding-bottom: 0;}
header .left-bar .top-left {height:77px; background:#fff; display:flex; justify-content:space-between; align-items: center; padding: 0 20px;}
header .left-bar .left_menu {flex:1; flex-direction:column; overflow:auto; padding: 26px 0 0; width: 70px; background-color: #f04b42;}
header .left-bar .left_menu ul {border: none; list-style: none; margin: 0; padding: 0;}
header .left-bar .left_menu ul li a {display: flex; align-items: center; border:none; border-radius:0; color:#fff; position: relative; width: 270px; height: 78px; font-size: 20px; padding:0 0 0 73px; text-decoration: none;}
header .left-bar .left_menu ul li a svg {position: absolute; left: 20px;}
header .left-bar .left_menu ul li a svg path {fill: #fff;}
header .left-bar .left_menu ul li a:hover:not(header .left-bar .left_menu ul li a.active) {background-color:#eb7d77;}
header .left-bar .left_menu ul li a.active {color: #000; background-color: #fff; pointer-events: none;}
header .left-bar .left_menu ul li a.active svg path {fill: #f04b42;}

header .top-bar {position:absolute; top:0; left:0; width:100vw; height:77px; display:flex; justify-content:end; background:#fff; z-index:-1; align-items: center; padding: 0 20px; box-shadow: 0px 40px 16px rgba(0, 0, 0, 0.01), 0px 23px 14px rgba(0, 0, 0, 0.03), 0px 10px 10px rgba(0, 0, 0, 0.04), 0px 3px 6px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0.05);}
header .top-bar .auth .user-btn {display: inline-flex; justify-content: end; align-items: center; background-color:#f04b42; border-radius: 20px; border-color: #f04b42; font-size: 14px; max-width: 175px; margin: 0 0 0 auto; padding: 7px 27px 7px 58px; position: relative;}
header .top-bar .auth .user-btn:hover {background-color:#eb7d77; border-color: #eb7d77; color: #fff;}
/* header .top-bar .auth .user-btn:hover svg path {fill: #f04b42;} */
header .top-bar .auth .user-btn svg {position: absolute; top: -10%; left: 10%;}
header .burger {width:27px; height:21px; cursor:pointer;}

header .burger .line {width: 27px; height: 3px; background-color: #f04b42; border-radius: 10px; margin: 5px 5px 5px 0;}
header .burger .line:nth-child(2) {width: 23px;}

header #logo a img {width:186px;}

/* Общие стили */
.table tbody {border-top: none !important;}
.table tr {border-style: none; border-color: transparent; vertical-align: middle;} 
.table .table-date {color: #f04b42;}
.table .table-active {background-color: #ffc0bd; border-radius: 10px; border-color: transparent; --bs-table-accent-bg: transparent;}
.table .table-active td:first-child {border-radius: 10px 0 0 10px;}
.table .table-active td:last-child {border-radius: 0 10px 10px 0;}

.btn.btn-danger {color: #fff;background-color: #F04B42;border-color: #F04B42;font-size: 20px;border-radius: 10px;padding: 10px;}
.btn.btn-second {background-color: #ffc0bd; border-color: #ffc0bd; color: #6b3232;}

.btn.btn-danger:hover {background-color: #fff; color: #6b3232;}
.btn.btn-second:hover {background-color: #fff; /*color: #6b3232;*/}

/* Страница Мои сайты */
#main {flex:1; margin-top:77px; padding-top:3rem; background-color: #fff; padding-left: 100px;}
#main .page-title {font-size:30px; margin-bottom: 70px;}

#main .card {border: none; border-radius: 20px; font-size: 18px; text-align: center; box-shadow: 0px 72px 29px rgba(0, 0, 0, 0.01), 0px 40px 24px rgba(0, 0, 0, 0.03), 0px 18px 18px rgba(0, 0, 0, 0.04), 0px 4px 10px rgba(0, 0, 0, 0.05), 0px 0px 0px rgba(0, 0, 0, 0.05); transition: 600ms;}
#main .card .image {margin: 0 0 20px;}
#main .card .title {border-bottom: 1px solid #f04b42; color: #f04b42; font-weight: 600; padding: 0 0 20px;}
#main .card .text {border-bottom: 1px solid #f04b42; padding: 15px 0; margin: 0;}
#main .card .btns {padding: 28px 0 0;}
#main .card .btns .btn-danger {background-color: #f04b42; border-radius: 10px; font-size: 18px; border-color: transparent;}
#main .card .btns .btn-danger:hover {/*background-color: #fff;*/ background-color:#eb7d77;}

#main .add-card {display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px dashed rgba(0, 0, 0, 0.5); gap: 32px; border-radius: 0; box-shadow: none; height: 258px;}

@media screen and (min-width: 1200px) {
    #main {padding-left: 300px;} 

    #main .card:hover {transform: scale(1.05);}
}

/* Модальные окна */
.modal-dialog {max-width: 400px;}
.modal-content {display: flex; flex-direction: column; background-color: #fff; border: 1px solid transparent; border-radius: 20px; box-shadow: 37px 127px 53px rgba(0, 0, 0, 0.01), 21px 71px 45px rgba(0, 0, 0, 0.05), 9px 32px 33px rgba(0, 0, 0, 0.09), 2px 8px 18px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1); font-size: 18px; padding: 40px 34px 50px;}
.modal-content .list {list-style: none; margin: 0; padding: 0;}
.modal-content .modal-table {/*margin: 0 0 10px;*/ padding: 20px 0 27px; border-top: 1px solid #f04b42;}
.modal-content .modal-table:first-child {border-top: none; padding-top: 0;}
.modal-content .list .item {display: flex; justify-content: space-between;}
.modal-content .modal-input {border: 1px solid #dbdbdb; padding: 20px; border-radius: 10px;}
.modal-content .modal-input:focus {outline: none; border: 1px solid #f04b42;}
.modal-content .title {color: #f04b42; font-weight: 600; margin-bottom: 10px;}
/* .modal-form .btn.btn-danger {color: #fff;background-color: #F04B42;border-color: #F04B42;font-size: 20px;border-radius: 10px;padding: 10px;}
.modal-form .btn.btn-second {background-color: #ffc0bd; border-color: #ffc0bd; color: #6b3232;} */

/* Страница Пользователи */
/* .user-wrap .btn.btn-danger {background-color: #f04b42; border-radius: 10px; font-size: 18px; border-color: #f04b42;} */
.user-wrap .form-control {border: 1px solid #dbdbdb; padding: 10px; border-radius: 10px 0 0 10px !important; border-right: transparent; font-size: 18px;}
.user-wrap .form-control:focus {outline: none; border: 1px solid #f04b42;}
.user-wrap .table tbody {border-top: none;}

/* Страница Серверы */
.servers-wrap .table tbody {border-top: none;}
.servers-wrap .table .table-icon-mark {width: 15px;}
/* .servers-wrap .btn-servers {display: flex; align-items: flex-start; justify-content: end;} */
/* .servers-wrap .btn.btn-danger {background-color: #f04b42; border-radius: 10px; font-size: 18px; border-color: #f04b42;} */

/* Страница Проекты */
.projects-wrap .form-control {border: 1px solid #dbdbdb; padding: 10px; border-radius: 10px 0 0 10px !important; border-right: transparent; font-size: 18px;}
.projects-wrap .table tbody {border-top: none;}
/* .projects-wrap .btn.btn-danger {background-color: #f04b42; border-radius: 10px; font-size: 18px; border-color: #f04b42;} */
.projects-wrap .table-date {color: #f04b42;}

/* Страница Домены */
/* .domains-wrap .btn.btn-danger {color: #fff;background-color: #F04B42;border-color: #F04B42;font-size: 20px;border-radius: 10px;padding: 10px;}
.domains-wrap .btn.btn-second {background-color: #ffc0bd; border-color: #ffc0bd; color: #6b3232;} */

@media screen and (min-width: 1200px) {
    header {max-width:270px;}
    header .left-bar {align-items: center;}
    header .left-bar .left_menu {width: unset;}
}