.virtual-machine-container .tabs-left, .virtual-machine-container .tabs-right { border-bottom: none; padding-top: 2px; } .virtual-machine-container .tabs-left { border-right: 1px solid #ddd; } .virtual-machine-container .tabs-right { border-left: 1px solid #ddd; } .virtual-machine-container .tabs-left>li, .virtual-machine-container .tabs-right>li { float: none; margin-bottom: 2px; } .virtual-machine-container .tabs-left>li { margin-right: -1px; } .virtual-machine-container .tabs-right>li { margin-left: -1px; } .virtual-machine-container .tabs-left>li.active>a, .virtual-machine-container .tabs-left>li.active>a:hover, .virtual-machine-container .tabs-left>li.active>a:focus { border-bottom-color: #ddd; border-right-color: transparent; } .virtual-machine-container .tabs-right>li.active>a, .virtual-machine-container .tabs-right>li.active>a:hover, .virtual-machine-container .tabs-right>li.active>a:focus { border-bottom: 1px solid #ddd; border-left-color: transparent; } .virtual-machine-container .tabs-left>li>a { border-radius: 4px 0 0 4px; margin-right: 0; display:block; } .virtual-machine-container .tabs-right>li>a { border-radius: 0 4px 4px 0; margin-right: 0; } .virtual-machine-container .right-place{ margin-top: 15px; } .virtual-machine-container .separate-md{ margin-top: 35px; } .virtual-machine-container .box-setting{ height: 100px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .virtual-machine-container .box-setting .label-success{ padding-top: 4px; } .virtual-machine-container .form-ssh textarea{ height: 150px !important } /*Create VM Styles*/ .parent-container{ overflow-x: hidden; overflow-y: hidden; } .parent-container ::-webkit-scrollbar { display: none; } .container-os{ overflow: auto; padding: 0px 0px; min-width: 300px; width: auto; max-width: 800px; min-height: 150px; } .container-os .owl-next{ position: absolute; right: -12px; top: 6px; color: gray !important; background: transparent !important; font-size: 54px !important; } .container-os .owl-prev{ position: absolute; left: -12px; top: 6px; color: gray !important; background: transparent !important; font-size: 54px !important; } .container-os .owl-dots{ display: none; } .container-os .os-circle{ width: 120px; height: 120px; display: flex; margin: 0 auto; justify-content: center; align-items: center; background: #f7f7f7; border-radius: 50%; cursor: pointer; text-align: center; min-width: 120px; border: 4px solid #b9b9b9; transition: all .1s ease-in; } .step-title{ margin-bottom: 25px; } .container-os.config .config-box{ width: 115px; height: 115px; display: flex; margin: 0 auto; flex-direction: column; justify-content: center; align-items: center; background: #f7f7f7; /* border-radius: 50%; */ cursor: pointer; text-align: center; min-width: 115px; border-radius: 7px; border: 4px solid #b9b9b9; transition: all .1s ease-in; } .container-os .os-circle.active{ border: 6px solid #2dc32d; min-width: 135px; width: 135px; height: 135px; } .container-os .os-circle.active .text{ font-size: 20px; line-height: 20px; } .container-os.config .config-box.active{ border: 6px solid #5cb85c; min-width: 125px; width: 125px; height: 125px; } .container-os.config .config-box span{ font-size: 14px; } .container-os.config .config-box.active span{ font-size: 16px; } .container-os .os-circle .text{ font-size: 16px; width: 50%; line-height: 16px; } .container-button{ text-align: right; display: none; } .container-button .btn{ font-size: 17px; width: 150px; margin-top: 5px; } .container-button .price{ font-size: 18px; } @media (max-width: 990px) { .virtual-machine-container .tabs-left { border-right: 0; } .virtual-machine-container .tabs-left>li.active>a, .virtual-machine-container .tabs-left>li.active>a:hover, .virtual-machine-container .tabs-left>li.active>a:focus { border: 1px solid #ddd; } .virtual-machine-container .tabs-left>li>a { border-radius: 4px; margin-right: 0; display:block; } } @media (max-width: 768px) { .container-button{ text-align: center; } .step-title{ text-align: center; } .dashboard-title{ text-align: center; } .container-os .os-circle{ width: 105px; height: 105px; min-width: 105px; } .container-os .os-circle .text{ font-size: 14px; line-height: 15px; } .container-os .owl-next { right: 20px; top: 20px; font-size: 40px !important; } .container-os .owl-prev{ position: absolute; left: 20px; top: 20px; font-size: 40px !important; } } @media (max-width: 420px) { .btn-create-vm { float: left !important; } } /* New styles */ .dashboard-container-head { padding: 0 8px; } .dashboard-title-thin { font-weight: 300; font-size: 32px; } .dashboard-title-thin .un-icon { height: 34px; margin-right: 5px; margin-top: -1px; width: 20px; } .dashboard-subtitle { font-weight: 300; margin-bottom: 25px; } .btn-vm { background: #1596DA; color: #fff; font-weight: 400; letter-spacing: 0.8px; border-radius: 3px; padding-bottom: 7px; border: 2px solid #1596DA; } .btn-vm:hover, .btn-vm:focus { color: #1596DA; background: #fff; } .btn-vm:hover .css-plus:after, .btn-vm:focus .css-plus:after, .btn-vm:hover .css-plus:before, .btn-vm:focus .css-plus:before { background: #1596DA; } .btn-vm-detail { background: #3770CC; color: #fff; font-weight: 400; letter-spacing: 0.6px; font-size: 14px; border-radius: 3px; border: 2px solid #3770CC; padding: 4px 20px; /* padding-bottom: 7px; */ } .btn-vm-detail:hover, .btn-vm-detail:focus { background: #fff; color: #3770CC; } .vm-status, .vm-status-active, .vm-status-failed { font-weight: 600; } .vm-status-active { color: #4A90E2; } .vm-status-failed { color: #eb4d5c; } @media (min-width:768px) { .dashboard-subtitle { display: flex; justify-content: space-between; font-size: 16px; } } @media (max-width:767px) { .dashboard-title-thin { font-size: 22px; } .dashboard-title-thin .un-icon { height: 20px; width: 18px; margin-top: -3px; } .dashboard-subtitle p { width: 200px; } } .table-switch { color: #555; } .table-switch > tbody > tr > td { padding: 12px 8px; } @media (min-width: 768px) { .table-switch > tbody > tr > td:nth-child(1) { padding-right: 45px; } .table-switch > tbody > tr:last-child > td { border-bottom: 1px solid #ddd; } } .table-switch .un-icon { margin-left: 5px; } @media (max-width:767px) { .dashboard-subtitle { margin-bottom: 15px; } .table-switch .un-icon { float: right; margin-top: 0; } .table-switch thead { display: none; } .table-switch tbody tr { display: block; position: relative; border-top: 1px solid #ddd; /* margin-top: 15px; */ padding-top: 5px; padding-bottom: 15px; } .table-switch tbody tr:last-child { border-bottom: 1px solid #ddd; } .table-switch tbody tr td { display: block; padding-top: 28px; padding-bottom: 6px; position: relative; border: 0; } .table-switch td:before { content: attr(data-header); font-weight: 600; position: absolute; top: 5px; } .table-switch .last-td { position: absolute; bottom: 20px; right: 0; } }