@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arima+Madurai:wght@400;500;700&display=swap');

*{margin: 0px; padding: 0px; box-sizing: border-box;}

h1,h2,h3,h4{ margin: 0px; padding: 0px;}

body{ background: #eee;}

.container{width: 65%; margin:15px auto; border-radius: 15px; background: #fff; overflow: hidden;}

.left-side{ width: 50%; float: left;}
.left-side img{ width: 100%; border-radius: 15px 0px 0px 15px; margin-bottom: -5px;}

.right-sider{width: 35%; float: left; font-family: 'Arima Madurai', cursive; text-align: center; margin:6% 7% 0% 7%;}
.right-sider img{ width: 90px;}
.right-sider h3{font-size: 25px; color: #000; font-weight: normal; margin:20px 0px;}
.right-sider input {border: 1px solid #d5dae2; font-size: 15px; width:100%; padding: 15px 25px; margin-bottom:12px; font-weight: normal; border-radius: 5px;}
.right-sider h4{font-size: 16px; color: #0d2366; margin-bottom:40px; font-weight: 500;}
.right-sider h4 span{font-size: 16px; color: #919aa3; margin-bottom: 12px; margin-top: 10px; display: block; font-weight: 500;}
.right-sider h4 a{ font-weight: 500;  color: #0d2366; text-decoration: none;}
.right-sider h4 a:hover{ text-decoration:underline;}
.right-sider p a{font-size: 15px; color: #919aa3; text-decoration: none; margin-right: 5px;}
.right-sider p a:hover{ text-decoration: underline;}

.right-sider input:focus{outline: none;}

.right-sider input.btn{border: 1px solid #000; color: #fff; cursor: pointer; background: #000; font-size: 18px; text-transform: capitalize; transition:all 1.5s;
    -webkit-transition:all 1.5s; -o-transition:all 1.5s; -moz-transition:all 1.5s; width: 100%;}
.right-sider input.btn:hover{ color: #000; background: #fff;}

.sidebar{position:fixed; width:80px; z-index: 888; padding: 10px; height: 100%; top: 0px; left: 0px; background: url(../images/sidebar-1.jpg) no-repeat center; background-size: cover;
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%); transition: width 0.5s, height 0.5s, transform 0.5s;
    font-family: 'Arima Madurai', cursive;}

.sidebar:before {content: ''; position: absolute; width: 100%; height: 100%; background: #000; top: 0px; opacity: 0.8; left: 0px;}

.sidebar:hover {width:280px;}


.user-info{border-top: 1px solid #b5b5b54d; z-index: 888; position: relative; border-bottom: 1px solid #b5b5b54d; padding: 12px 5px; margin-top: 12px;}
.user-info img{ border-radius: 50%; width: 35px;}
.user-info span {color:#c8c8c8; font-size: 17px; margin-left: 5px; text-transform: capitalize;}
.user-info i {color:#c8c8c8; font-size: 18px;}
.user-info .user-info-box i {right: 0px; position: absolute; padding-top: 3px;}

.sidebar ul.navbar {list-style: none; margin:15px 0px 0px 0px ; padding: 0px;}

.sidebar ul.user-Profile {list-style: none; margin:15px 0px 0px 0px; display: none; padding: 0px;}
.sidebar li{display: block; width:100%; padding: 10px; border-radius: 5px;}
.sidebar li a{text-decoration: none; text-transform: capitalize; font-size: 17px; color:#c8c8c8;}
.sidebar li a i{font-size:20px; color:#c8c8c8; padding-right:10px; display: inline-block;}
.sidebar li:hover {background-color: hsla(0,0%,78%,.2);}

.user-info-box{ cursor: pointer; position: relative; display: block; height: auto; white-space: nowrap;}

.user-info ul.user-Profile li a{font-size: 16px;}



.logo{z-index: 888; position: relative; display: block; height: auto; white-space: nowrap; }
.logo img{ width:50px;}
.logo span {color:#c8c8c8; font-size:18px; margin-left:10px;}   

.main-panel {position: relative; font-family: 'Arima Madurai', cursive; float: right; width: calc(100% - 90px); transition: .33s,cubic-bezier(.685,.0473,.346,1);
    transition: width 0.5s, height 0.5s, transform 0.5s;}

  

.head{ padding: 15px 0px; display: inline-block; font-family: 'Arima Madurai', cursive;}
.head h2 {font-size:20px; font-weight:500; color: #3c4858;}
.head h2 i{width: 40px; height: 40px; cursor: pointer; background: #fff; text-align: center; border-radius: 20px; padding: 10px; margin-right: 10px; color: #999; font-size: 18px;
    box-shadow: 0 2px 2px 0 hsl(0deg 0% 60% / 14%), 0 3px 1px -2px hsl(0deg 0% 60% / 20%), 0 1px 5px 0 hsl(0deg 0% 60% / 12%); transition: color .30s ease-in-out,background-color .30s ease-in-out,border-color .30s ease-in-out,box-shadow .30s ease-in-out;}
.head h2 i:hover {box-shadow: 0 14px 26px -12px hsl(0deg 0% 60% / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px hsl(0deg 0% 60% / 20%);}


.login{font-family: 'Roboto', sans-serif;}
.login ul{ list-style: none; margin: 0px; padding: 0px;}
.login li{display: block;}

.user {float: right; padding: 15px 0px; position: relative; font-family: 'Arima Madurai', cursive;}
.user i {width: 40px; cursor: pointer; height: 40px; background: #fff; text-align: center; border-radius: 20px; padding: 10px; margin-right: 10px; color: #999; font-size: 18px;
    box-shadow: 0 2px 2px 0 hsl(0deg 0% 60% / 14%), 0 3px 1px -2px hsl(0deg 0% 60% / 20%), 0 1px 5px 0 hsl(0deg 0% 60% / 12%); transition: color .30s ease-in-out,background-color .30s ease-in-out,border-color .30s ease-in-out,box-shadow .30s ease-in-out;}
.user i:hover {box-shadow: 0 14px 26px -12px hsl(0deg 0% 60% / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px hsl(0deg 0% 60% / 20%);}
.user ul{list-style: none; top: 50px; display: none; padding: 0px; margin: 0px; width: 150px; background: #fff; box-shadow: 0 10px 40px 0 rgb(32 28 69 / 10%); text-align: left; border-radius: 5px; position: absolute; right: 0px; z-index: 777;}
.user li{ display: block;}
.user li:hover{background: #f8f9fa;}
.user li a{ text-decoration: none; color:#7e7e7e; font-size: 16px;}
.user li a i{background: none; width: auto; height: auto; box-shadow: none; margin-right: 0px; font-size: 16px;}
.user:hover ul {display: block;}

.content-box{box-shadow: 0 1px 4px 0 rgb(0 0 0 / 14%); font-family: 'Arima Madurai', cursive; position: relative; background: #fff; padding: 20px; border-radius: 8px; margin-top: 30px;}
.content-box h3{ color: #3c4858; font-size:18px; font-weight: 500; margin-top: -30px;}
.content-box h3 i {box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%);     background: linear-gradient(
    60deg ,#ec407a,#d81b60); color: #fff; padding: 20px; border-radius: 5px; font-size: 24px; top: -10px; position: relative; margin-right: 10px;}

.content-box table {width: 100%;}
.content-box table tr{ border-bottom: 1px solid #ddd;}
.content-box table tr:last-child{ border-bottom: none;}
.content-box table tr td{ padding:10px; text-align: center; position: relative; color: #3c4858; font-size:16px; font-weight: 500;}

.content-box table tr td:nth-of-type(1){ width:10%;}
.content-box table tr td:nth-of-type(2){ width:18%;}
.content-box table tr td:nth-of-type(3){ width:18%;}
.content-box table tr td:nth-of-type(4){ width:18%;}
.content-box table tr td:nth-of-type(5){ width:18%;}
.content-box table tr td:nth-of-type(6){ width:18%;}
 
.content-box table tr td:last-child button {border: none; position: relative; background-color: #e7faec; border-color: #e7faec; color: #2bc155; box-shadow: 0 14px 26px -12px rgb(0 188 212 / 42%), 0 4px 23px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 188 212 / 20%); 
    padding:5px; margin-right: 5px; font-size: 16px; border-radius: 5px; transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
.content-box table tr td:last-child button span {font-size: 30px; height:0px; line-height:14px; vertical-align: text-top;}
.content-box table tr td:last-child button:hover{color: #e7faec; background: #2bc155;}

.btn-dot .edit-del {background: #fff; overflow: hidden; display: none; left: 0; z-index: 777; width: 150px; box-shadow: 0 10px 40px 0 rgb(32 28 69 / 10%); text-align: left; border-radius: 5px; position: absolute; top:40px;}
.btn-dot .edit-del ul{ list-style: none; margin: 0px; padding: 0px;}
.btn-dot .edit-del li{ display: block; padding:6px 10px; }
.btn-dot .edit-del li:hover {background: #f8f9fa;}
.btn-dot .edit-del li a{text-decoration: none; color:#7e7e7e; font-size: 16px;}
.btn-dot .edit-del li button{text-decoration: none; color:#7e7e7e; font-size: 16px;}
.content-box .btn-dot .edit-del li a span {color: #7e7e7e; font-size: 14px; text-transform: capitalize; padding-left: 5px; vertical-align: inherit;}
.content-box button.btn-dot:hover .edit-del{ display: block;}

.pop-e-d {background: #fff; overflow: hidden; right: 0px; z-index: 777; width: 150px; box-shadow: 0 10px 40px 0 rgb(32 28 69 / 10%); text-align: left; border-radius: 5px; position: absolute; top:40px;}
.pop-e-d ul{ list-style: none; margin: 0px; padding: 0px;}
.pop-e-d li{ display: block; padding:6px 10px; }
.pop-e-d li:hover {background: #f8f9fa;}
.pop-e-d li a{text-decoration: none; color:#7e7e7e; font-size: 16px;}
.pop-e-d li a button{text-decoration: none; color:#7e7e7e; font-size: 16px;}


.form-box{}
.form-box label{ width: 18%; text-align: right; color: #aaa; font-weight: 400; font-size: 16px; text-transform: capitalize;}
.form-box input{width: 80%; margin-left: 2%; border: none; padding:10px 0px; margin-bottom:8px; border-bottom: 1px solid #d2d2d2;}
.form-box textarea{width: 80%; margin-left: 2%; padding: 10px 0px; margin-bottom: 8px; border-bottom: 1px solid #d2d2d2; border-top: none; border-left: none; border-right: none;}
.form-box select{width: 80%; margin-left: 2%; padding: 10px 0px; margin-bottom: 8px; border-bottom: 1px solid #d2d2d2; border-top: none; border-left: none; border-right: none;}
.form-box .check-box input {width: auto; border: 1px solid #d2d2d2; margin-right:3px;}
.form-box .check-box span{ text-align:left; color: #aaa; font-weight: 400; font-size: 16px; text-transform: capitalize;}
.form-box .check-box {width: 80%; display: inline-block; margin-bottom: 8px;}

input:focus{outline: none;}
textarea:focus{outline: none;}
select:focus{outline: none;}

.content-box input.sub-btn{box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%);
    background: linear-gradient(60deg ,#ec407a,#d81b60); font-size: 16px; text-transform: capitalize; padding: 6px 15px; border: none; color: #fff; border-radius: 5px; margin-left: 21%; margin-top: 10px;}

.form-box label.mid-label {vertical-align: top; padding-top: 10px;}

.user-info-box i.fa.fa-sort-desc{-webkit-transition: -webkit-transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out;}
.user-info-box i.fa.fa-sort-desc.main{-webkit-transform: rotate(180deg); transform: rotate(180deg); top: 5px;
    position: relative; -webkit-transition: -webkit-transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out;}

.sidebar ul.navbar i.fa-sort-desc {right: 0px; position: absolute; margin-right: -5px; -webkit-transition: -webkit-transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out;}
.sidebar ul.navbar i.fa.fa-sort-desc.main{-webkit-transform: rotate(180deg); transform: rotate(180deg); top: 5px;
    position: relative; -webkit-transition: -webkit-transform 0.8s ease-in-out; transition: transform 0.8s ease-in-out;}

.sidebar ul.navbar li{ cursor: pointer; position: relative; display: block; height: auto; white-space: nowrap;}
.sidebar ul.navbar ul.sub-menu-left {padding-left: 5px; display: none; padding-top: 12px;}

.sidebar ul.navbar li span {display: none; transform: translate3d(-25px,0,0);}
.sidebar ul.navbar i.fa-sort-desc {display: none; transform: translate3d(-25px,0,0);}
.sidebar .user-info-box span {display: none; transform: translate3d(-25px,0,0);}
.sidebar .user-info-box i.fa-sort-desc {display: none; transform: translate3d(-25px,0,0);}
.sidebar .logo span {display: none; transform: translate3d(-25px,0,0);}

.sidebar:hover ul.navbar li span {transform: translateZ(0); display:inline-block;}
.sidebar:hover ul.navbar i.fa-sort-desc {transform: translateZ(0); display:inline-block; float: right;}
.sidebar:hover .user-info-box span {transform: translateZ(0); display:inline-block;}
.sidebar:hover .user-info-box i.fa-sort-desc {transform: translateZ(0); display:inline-block;}
.sidebar:hover .logo span {transform: translateZ(0); display:inline-block;}

.sidebar.active ul.navbar li span {transform: translateZ(0); display:inline-block;}
.sidebar.active ul.navbar i.fa-sort-desc {transform: translateZ(0); display:inline-block; float: right;} 
.sidebar.active .user-info-box span {transform: translateZ(0); display:inline-block;}
.sidebar.active .user-info-box i.fa-sort-desc {transform: translateZ(0); display:inline-block;}
.sidebar.active .logo span {transform: translateZ(0); display:inline-block;}

.sidebar.active {width: 280px;}
.main-panel.active { width: calc(100% - 280px);}

.reserved {padding: 15px 0px; margin-top: 30px; font-family: 'Arima Madurai', cursive; border-top: 1px solid #ddd; text-align: right; font-size: 16px; font-weight:500; display: inline-block; color: #3c4858; width: 100%;}

.sidebar ul.navbar li:hover .sub-menu-left{ display: block;}
.user-info:hover .user-Profile{ display: block;}


ul.navbar ul.sub-menu-left li a {font-size: 16px;}

.content-box .btn-dot .edit-del{ right: 0px;}

footer {display: block; clear: both;}
.content-box form.ctr-box {text-align: center; padding:10px 0px 30px 0px;}
.content-box form.ctr-box input{width: 20%; margin-left: 2%; border: none; padding: 15px 0px; margin-bottom: 8px; border-bottom: 1px solid #d2d2d2;}
.content-box form.ctr-box input:nth-child(2){ width: auto; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%);
    background: linear-gradient(60deg ,#ec407a,#d81b60); font-size: 16px; text-transform: capitalize; padding: 6px 15px; border: none; color: #fff; border-radius: 5px;
    margin-left: 1%;}
.content-box form.ctr-box input:nth-child(1){ padding: 10px 0px; margin-bottom: 0px;}

.edit-del i.fa.fa-check.text-safe {color: #1bbf1b;}
.edit-del i.fa.fa-pencil-square-o {color:#3a8abf;}
.edit-del i.fa.fa-ban.text-danger {color: #d9835e !important;}
.edit-del i.fa.fa-trash{color:#db4b37;}

.content-box h3 span {
    box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%);
    background: linear-gradient( 
60deg
 ,#ec407a,#d81b60);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 18px;
    position: relative;
    margin-right: 0px;
    float: right;
    margin-top: 20px;
    cursor: pointer;
}

.content-box h3 span a{color:#fff; text-decoration:none;}

.content-box  h5 {margin: 20px 0px;}
.form-box img {background: #ddd; padding: 20px; margin-left: 25px;}

.cke_toolbox span.cke_toolbar_break {display: inline-block;}

.form-box .cke_chrome {width:79.5%; display: inline-block; margin-left: 2%; margin-bottom:20px;}

.content-box .form-box #dynamic_field input {width: 30%; display: inline-block;}
.container-fluid .content-box #dynamic_field input {width: 30%; display: inline-block;}
.content-box .form-box #dynamic_field .add-2 {display: inline-block; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%); background: linear-gradient(60deg ,#ec407a,#d81b60); font-size: 16px; text-transform: capitalize; padding: 6px 15px; border: none; color: #fff; border-radius: 5px; margin-top: 10px;}
.content-box .form-box #dynamic_field .btn_remove{display: inline-block; margin-left: 5px; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%); background: linear-gradient(60deg ,#ec407a,#d81b60); font-size: 16px; text-transform: capitalize; padding: 6px 15px; border: none; color: #fff; border-radius: 5px; margin-top: 10px;}
.form-box a.remove-btn {display: inline-block; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%); background: linear-gradient(60deg ,#ec407a,#d81b60); font-size: 16px; text-transform: capitalize; padding: 6px 15px; border: none; color: #fff; border-radius: 5px; margin-top: 10px; margin-left: 10px; text-decoration:none;}

ul.pagination {width: 97%; margin: 12px;}
ul.pagination li.page-item a.page-link {color: #3c4858;}
ul.pagination li.page-item.active a.page-link {color: #fff;}
ul.pagination li.page-item a.page-link:focus{outline: none; box-shadow: none;}

.AWB-box{margin:60px 0px 20px 0px; clear: both; font-family: 'Arima Madurai', cursive; display: none; background:#fdfdfd; border-radius: 5px; padding: 15px; border: 1px solid #ddd;}
.AWB-box ul{ list-style: none; margin: 0px; padding: 0px;}
.AWB-box li{display: inline-block; width: 24.6%; padding-bottom: 15px; vertical-align: top;}
.AWB-box li label{text-align:left; position: relative; color: #3c4858; font-size: 16px; font-weight: 500;}
.AWB-box li input{width: 100%; padding: 5px; border-radius: 3px; border: 1px solid #ddd; margin-top: 5px;}
.AWB-box li select{width: 100%; padding: 5px; border-radius: 3px; border: 1px solid #ddd; margin-top: 5px; height: 36px;}
.AWB-box input.Submit-btn {background: linear-gradient(60deg ,#ec407a,#d81b60); color: #fff; position: relative; top:24px; font-size: 16px; border: none; width: auto; padding: 6px 30px;}

.search-box{ display: block;}
.search-box i {float: right; cursor: pointer; box-shadow: 0 4px 20px 0 rgb(0 0 0 / 14%), 0 7px 10px -5px rgb(233 30 99 / 40%); background: linear-gradient(60deg ,#ec407a,#d81b60); padding: 10px 15px; border-radius: 5px; color: #fff;}






@media (min-width:320px) and ( max-width:479px){

.container{ width:80%;}    
.container .left-side {width: 100%;}
.container .left-side img {border-radius: 10px 10px 0px 0px;}
.right-sider{width: 84%; margin: 8%;}
.right-sider h3 {font-size: 22px;}
.right-sider h4 {font-size: 14px;}
.right-sider input{padding: 10px 15px;}

.form-box label {width: 100%; font-size: 16px; text-align: left;}
.form-box input {width: 100%; margin-left: 0%; margin-bottom: 15px;}
.form-box select {width: 100%; margin-left: 0%; margin-bottom: 15px;}
.form-box textarea {width: 100%; margin-left: 0%; margin-bottom: 15px;}
.form-box .check-box {width: 100%; margin: 8px 0px; }
.content-box input.sub-btn{ margin-left: 0%;}

}

@media (min-width:480px) and ( max-width:767px){

.content-box table tr td{font-size:14px; padding: 8px 4px;}    
.sidebar {overflow: auto;}
.content-box{padding: 20px 10px;}

.sidebar.active {width: 230px;}
.sidebar:hover {width: 230px;}
.main-panel.active {width: calc(100% - 230px);}

.logo span {font-size: 15px;}
.user-info span {font-size: 15px;}
.sidebar ul.navbar span {font-size: 15px;}
ul.navbar ul.sub-menu-left li a {font-size: 15px;}
.reserved{font-size: 13px;}

.form-box label {width: 100%; font-size: 16px; text-align: left;}
.form-box input {width: 100%; margin-left: 0%; margin-bottom: 15px;}
.form-box select {width: 100%; margin-left: 0%; margin-bottom: 15px;}
.form-box textarea {width: 100%; margin-left: 0%; margin-bottom: 15px;}
.form-box .check-box {width: 100%; margin: 8px 0px; }
.content-box input.sub-btn{ margin-left: 0%;}

.sidebar:before {height: 200%;}

.container .left-side {width: 100%;}
.container .left-side img {border-radius: 10px 10px 0px 0px;}

.right-sider{width: 84%; margin: 8%;}

}

@media (min-width:768px) and ( max-width:1023px){

.form-box label {width: 30%;}
.form-box input {width: 68%; margin-left: 2%;}
.form-box select {width: 68%; margin-left: 2%;}
.form-box textarea {width: 68%; margin-left: 2%;}
.form-box .check-box {width: 66%; margin-left: 2%;}

.content-box input.sub-btn{margin-left: 33%;}

.container{ width: 80%;}
.right-sider {width: 39%; margin: 3% 5% 0% 5%;}
.right-sider h3 {font-size: 21px; margin: 10px 0px;}
.right-sider h4 {font-size: 14px; margin-bottom: 30px;}
.right-sider h4 span{margin-top: 0px; margin-bottom:6px;}
.right-sider input{margin-bottom: 10px; padding: 10px 15px;}

}


@media (min-width:980px) and ( max-width:1024px){

.container{ width: 70%;}
.right-sider {width: 39%; margin: 3% 5% 0% 5%;}
.right-sider h3 {font-size: 21px; margin: 10px 0px;}
.right-sider h4 {font-size: 14px; margin-bottom: 30px;}
.right-sider h4 span{margin-top: 0px; margin-bottom:6px;}
.right-sider input{margin-bottom: 10px; padding: 10px 15px;}


}